Gatsby: Need help: Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js): ...SyntaxError: ... Unexpected token

[ashokballolli]

Hi,

gatsby -v
2.4.8
node -v
v11.6.0
npm -v
6.5.0-next.0

Upgrading the gatsby from v1 to v2 so all its dependencies. Tried following the steps from the migration documents and during gatsby build getting below error, any help here is much appreciated.

Error: ./src/components/BlogRoll.jsx
  Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
  SyntaxError: ~/.../src/components/BlogRoll.jsx: Unexpected token, expected ";" (22:5)

    20 | }
    21 |
  > 22 | type tPROPS = {
       |      ^
    23 |   small: boolean
    24 | };
    25 |
      at _class.raise (~/.../node_modules/@babel/parser/lib/index.js:4051:15) 
---
---
Error: ./src/components/ContentWrapper.jsx
  Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
  SyntaxError: ~/.../src/components/ContentWrapper.jsx: Unexpected token, expected ";" (15:5)

    13 | import flattenFields from '../utils/flattenFields'
    14 |
  > 15 | type tPROPS = {
       |      ^
    16 |   content: Array<Object|string>;
    17 |   explorers: Object;
    18 |   infographics: Array<Object>;
      at _class.raise (~/.../node_modules/@babel/parser/lib/index.js:4051:15)
---

[ashokballolli]

Link to the repo: https://bitbucket.org/ashokbsamrat/gatsbyexp/src/v1ToV2/
https://[email protected]/ashokbsamrat/gatsbyexp.git
branch:v1ToV2

[sidharthachatterjee]

Hey @ashokballolli

Looks like it's breaking in Flow type annotations

From the migration at https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#add-gatsby-plugin-flow-if-you-are-using-flowtype

@babel/preset-flow was removed from Gatsby’s default babel configuration to make it easier to allow users to choose their own transpiler. If your site has its own .babelrc that already includes the Flow preset, no changes are necessary. Otherwise, you should install gatsby-plugin-flow.

Flow was removed from the default configuration in v2

You can easily fix this by adding gatsby-plugin-flow

Hope this helps!

[ashokballolli]

Hey @ashokballolli

Looks like it's breaking in Flow type annotations

From the migration at https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#add-gatsby-plugin-flow-if-you-are-using-flowtype

@babel/preset-flow was removed from Gatsby’s default babel configuration to make it easier to allow users to choose their own transpiler. If your site has its own .babelrc that already includes the Flow preset, no changes are necessary. Otherwise, you should install gatsby-plugin-flow.

Flow was removed from the default configuration in v2

You can easily fix this by adding gatsby-plugin-flow

Hope this helps!

Wow, that fixed my migration issue. Thank you very much @sidharthachatterjee .