Flow Type Error with Next.js 6

[bryanterrell]

Bug report

Describe the bug

When components with flow types are used the pages using those components throw an "Unexpected token" error due to type.

Packages:

• babel/preset-flow
• flow-bin

.babelrc

• babel/preset-flow in in presets
• babel/plugin-transform-flow-strip-types in plugins.

To Reproduce

1. git clone git@github.com:bryanterrell/hello-next-flow.git
2. cd hello-next-flow
3. npm i
4. npm run dev
5. Open http://localhost:3000 in browser & click Go to About Page
6. Error is produced:

Syntax Error: Unexpected token, expected ";" (3:5)

  1 | import * as React from "react";
  2 |
> 3 | type Props = {
    |      ^
  4 |   foo: number,
  5 |   bar?: string
  6 | };

Expected behavior

Flow types should be stripped out so component / page can be rendered.

System information

• OS: macOS
• Next.js version: 6.0.3

[bensalilijames]

There seems to be a regression between the beta.47 versions of the @babel packages and the beta.48 versions that stops Babel from parsing flow's types. Trying to investigate further but reverting back to beta.47 will solve the issue for now!

[bryanterrell]

Thanks, @benhjames - a good workaround for now!

[OKNoah]

Still present in beta.51

[bryanterrell]

@OKNoah yeah, that's the version I was trying to use. From the example repo above:
https://github.com/bryanterrell/hello-next-flow/blob/f9bfadad61ddbf8a9df256c8e388cd560a0d9cae/package.json#L19

[bensalilijames]

I did some investigating, and I think the root cause of this is that next.js is using an older version of @babel/core which uses the archived babylon instead of @babel/parser.

This line in plugin-syntax-flow sets parserOptions.plugins to [["flow", { all }]].

This is fine with the latest @babel/core, because it expects arrays within parserOptions.plugins according to this line.

But in babylon, this check against a simple string instead of an array will mean that flow isn't recognised as a plugin, and therefore the parser that can understand flow syntax will not be loaded.

Setting resolutions on package.json to: { "babel-core": "7.0.0-beta.53" }, which uses @babel/core as its parser rather than babylon, does fix the problem of parsing Flow types (but creates some new errors!)

@timneutkens I don't know if the fix for this is as simple as updating the babel dependencies of next to beta.53 - but that might make some headway to fixing this!

[ElForastero]

We've got the similar issue.

[Gisleburt]

I'm currently experiencing this too. I'm moving a project from Webpack to Next, and the Webpack build is fine.

  "dependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/plugin-proposal-class-properties": "^7.0.0-rc.1",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-rc.1",
    "@babel/polyfill": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "@babel/preset-flow": "^7.0.0-rc.1",
    "@babel/preset-react": "^7.0.0-rc.1",
    "isomorphic-fetch": "^2.2.1",
    "next": "^6.1.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "redux": "^3.7.2",
    "styled-components": "^3.4.2"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.6",
    "babel-loader": "^8.0.0-beta.4",
    "babel-plugin-istanbul": "^4.1.6",
    "chai": "^4.1.2",
    "codecov": "^3.0.4",
    "concurrently": "^3.6.1",
    "enzyme": "^3.4.1",
    "enzyme-adapter-react-16": "^1.2.0",
    "eslint": "^5.3.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-plugin-flowtype": "^2.50.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.10.0",
    "flow-bin": "^0.78.0",
    "html-webpack-plugin": "^3.2.0",
    "karma": "^2.0.5",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.2",
    "karma-mocha": "^1.3.0",
    "karma-nyan-reporter": "^0.2.5",
    "karma-webpack": "^4.0.0-beta.0",
    "mocha": "^5.2.0",
    "nodemon": "^1.18.3",
    "nyc": "^12.0.2",
    "puppeteer": "^1.7.0",
    "sinon": "^6.1.5",
    "sinon-chai": "^3.2.0",
    "webpack": "^4.16.5",
    "webpack-cdn-plugin": "^2.2.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }

I've searched pretty thoroughly and can't find anything quite like it so assume I've missed something basic.

ModuleBuildError: Module build failed: SyntaxError: /Users/danielmason/projects/Apolitical/frontend-skeleton/src/App/App.jsx: Unexpected token, expected ";" (5:5)

  3 | import styled from 'styled-components';
  4 | 
> 5 | type AppProps = {
    |      ^
  6 |   onClick?: ()=>void,
  7 |   clicked?: boolean,
  8 |   name?: string,

Perma link to our code: https://github.com/apolitical/frontend-skeleton/tree/423d25cbfd93209cd5401a158bf972476d3fa545

[w01fgang]

I've had a similar issue
In the next/babel preset already has preset-react
With @babel/preset-flow didn't work.
The latest version of Next.js uses babel/core@7.0.0-beta.42.
I've installed "babel-core": "^7.0.0-0" which is actually an adapter for plugins that use "babel@^6.x.x", also I've added "babel-plugin-transform-flow-strip-types" and "transform-flow-strip-types" to pluhins in .babelrc because in new react preset was removed.

[ChristosChristofidis]

Still encountering this issue

[oliviertassinari]

Looking into a solution, I'm facing the problem too using "@babel/core": "7.0.0-rc.1", and "next": "^7.0.0-canary.0",.

[w01fgang]

@oliviertassinari can you provide a link to the repo with this error, please?