Gatsby: Updating to 2.0.2-rc.0 blows up everything 💣

[Manoz]

Description

So I wanted to try the release candidate in my own website but it looks like something dies during the process for some reason and I don't really understand what happens.

Steps to reproduce

• git clone https://github.com/Manoz/k-legrand.com.git
• cd k-legrand.com
• git checkout pre-production
• yarn dev or gatsby develop

Expected result

The app should runs without issues

Actual result

The earth blows up and throws me errors.
Here's the error output I have when starting the develop or build scripts:

success run graphql queries — 0.100 s — 9/9 91.96 queries/second
success write out page data — 0.003 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.002 s
info bootstrap finished - 3.861 s
error Generating JavaScript bundles failed
  Error: ./.cache/production-app.js
  Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
  TypeError: programPath.hub.addHelper is not a function
      at wrapInterop (/home/travis/build/Manoz/k-legrand.com/node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/helper-module-transform  s/lib/index.js:165:45)
      at PluginPass.exit (/home/travis/build/Manoz/k-legrand.com/node_modules/@babel/plugin-transform-modules-commonjs/lib/index.js:174:70)
      at newFn (/home/travis/build/Manoz/k-legrand.com/node_modules/@babel/traverse/lib/visitors.js:193:21)
      at NodePath._call (/home/travis/build/Manoz/k-legrand.com/node_modules/@babel/traverse/lib/path/context.js:53:20)
      at NodePath.call (/home/travis/build/Manoz/k-legrand.com/node_modules/@babel/traverse/lib/path/context.js:40:17)
      at NodePath.visit (/home/travis/build/Manoz/k-legrand.com/node_modules/@babel/traverse/lib/path/context.js:97:8)
      at TraversalContext.visitQueue (/home/travis/build/Manoz/k-legrand.com/node_modules/@babel/traverse/lib/context.js:118:16)
      at TraversalContext.visitSingle (/home/travis/build/Manoz/k-legrand.com/node_modules/@babel/traverse/lib/context.js:90:19)
      at TraversalContext.visit (/home/travis/build/Manoz/k-legrand.com/node_modules/@babel/traverse/lib/context.js:146:19)
      at Function.traverse.node (/home/travis/build/Manoz/k-legrand.com/node_modules/@babel/traverse/lib/index.js:94:17)
      at traverse (/home/travis/build/Manoz/k-legrand.com/node_modules/@babel/traverse/lib/index.js:76:12)
      at transformFile (/home/travis/build/Manoz/k-legrand.com/node_modules/gatsby/node_modules/@babel/core/lib/transformation/index.js:88:29)
      at runSync (/home/travis/build/Manoz/k-legrand.com/node_modules/gatsby/node_modules/@babel/core/lib/transformation/index.js:45:3)
      at runAsync (/home/travis/build/Manoz/k-legrand.com/node_modules/gatsby/node_modules/@babel/core/lib/transformation/index.js:35:14)
      at process.nextTick (/home/travis/build/Manoz/k-legrand.com/node_modules/gatsby/node_modules/@babel/core/lib/transform.js:34:34)
      at _combinedTickCallback (internal/process/next_tick.js:131:7)
error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  WebpackError: ./.cache/develop-static-entry.js

  - bootstrap:42 NodePath._call
    lib/webpack/bootstrap:42:1

  - bootstrap:29 NodePath.call
    lib/webpack/bootstrap:29:1



  - bootstrap:79 TraversalContext.visitSingle
    lib/webpack/bootstrap:79:1


  - bootstrap:83 Function.traverse.node
    lib/webpack/bootstrap:83:1




  - bootstrap:24 runAsync
    lib/webpack/bootstrap:24:1


  - bootstrap:50 process._tickCallback
    lib/webpack/bootstrap:50:1

Same issue with gatsby build

Environment

  System:
    OS: Windows 10
    CPU: x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
  Binaries:
    Yarn: 1.9.4
    npm: 6.3.0D
  Browsers:
    Chrome: 68.0.3440.106

File contents (if changed)

gatsby-config.js: gatsby-config.js
package.json: package.json
gatsby-node.js: gatsby-node.js
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[Manoz]

I also have issues running gatsby info --clipboard so you can try it too just in case.
It's probably nothing but everything I tried didn't work:

• empty my Yarn cache
• delete .cache and .public folder
• delete node_modules & yarn.lock & rebuilding everything
• update gatsby-cli

Here's a link to my repository: https://github.com/Manoz/k-legrand.com/tree/pre-production

[Manoz]

Could be related to #7597 since when I run gatsby info --clipboard it stop and throws errors after the gatsby-transformer-sharp dependency version.

  npmPackages:
    gatsby: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-catch-links: ^2.0.2-rc.0 => 2.0.2-rc.0
    gatsby-plugin-eslint-v2: next => 2.0.0-beta.1
    gatsby-plugin-feed: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-google-analytics: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-google-fonts: ^0.0.4 => 0.0.4
    gatsby-plugin-lodash: ^3.0.1-rc.0 => 3.0.1-rc.0
    gatsby-plugin-manifest: ^2.0.2-rc.0 => 2.0.2-rc.0
    gatsby-plugin-netlify: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-nprogress: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-offline: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-react-helmet: ^3.0.0-rc.0 => 3.0.0-rc.0
    gatsby-plugin-sharp: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-sitemap: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-plugin-styled-components: ^3.0.0-rc.0 => 3.0.0-rc.0
    gatsby-plugin-twitter: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-remark-autolink-headers: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-remark-copy-linked-files: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-remark-images: ^2.0.1-rc.0 => 2.0.1-rc.0
    gatsby-remark-prismjs: ^3.0.0-rc.0 => 3.0.0-rc.0
    gatsby-remark-responsive-iframe: ^2.0.0-rc.0 => 2.0.0-rc.0
    gatsby-source-filesystem: ^2.0.1-rc.0 => 2.0.1-rc.0
    gatsby-transformer-remark: ^2.1.1-rc.0 => 2.1.1-rc.0
    gatsby-transformer-sharp: ^2.1.1-rc.0 => 2.1.1-rc.0

error The system cannot find the path specified.



  Error: The system cannot find the path specified.

[rdela]

Hey @Manoz did you read through the migration doc, particularly the part about Babel and .babelrc?
https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/#move-babel-configuration

I just switched https://github.com/rdela/rdela.com from canary to next and deleting the .babelrc fixed a similar bug for me. Have you tried removing:
https://github.com/Manoz/k-legrand.com/blob/pre-production/.babelrc

...and then building?

[rdela]

Oh also try using next in place of ^[x].[x].[x]-rc.0 for all the Gatsby packages in https://github.com/Manoz/k-legrand.com/blob/pre-production/package.json

https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/#update-gatsby-version

[rdela]

npm dist-tag ls [name-of-pkg] like npm dist-tag ls gatsby for example will show you the tagged versions https://docs.npmjs.com/cli/dist-tag

[Manoz]

@rdela Yeah that’s what I used before upgrading to the latest RC but looks like Yarn changed it. This shouldn’t be an issue as "next" is just an alias.

I think the issue is more a « Babel issue » than something related to Gatsby.
When I remove/rename my .babelrc file everything looks ok.

I will investigate why this behavior happens and if it’s something related to Gatsby or not.

Thanks for your help

[Manoz]

Oh and btw I didn’t move from v1 to v2. As you can see in my master branch I was on Gatsby v2 so this is not a migrating problem :)

[m-allanson]

@Manoz, it sounds like removing your .babelrc is the fix here? To echo @rdela's earlier comment, check out the migration notes on babel config

[Manoz]

Hum I'm confused.

If I rename my .babelrc file to babel.config.json the build works but I'm not sure if this file is used. I tried to create a typo in one of the plugin names in this file and looks like the build is working.
For example: "presets": ["@babel/presddsqet-env", "@babel/presqdqsdset-react"], (same for the plugins).
It should output some "module not found..." errors but the build is still passing for some reason.

If I rename my file to babel.config.js (which should be ok according to the migrating guide and babel 7 documentation), I have the same error I had previously with my .babelrc file.

Here's the file:

module.exports = {
  presets: ['@babel/env', '@babel/react'],
  plugins: [
    '@babel/proposal-class-properties',
    '@babel/proposal-optional-chaining',
    '@babel/syntax-dynamic-import',
    'babel-plugin-styled-components',
    '@babel/transform-arrow-functions',
    '@babel/transform-runtime',
  ],
};

Same error message: TypeError: programPath.hub.addHelper is not a function....
I also tried to move my babel config inside my package.json > same issue.

That's why I'm confused :D

[Manoz]

Here's the build output from Travis and the commit where I tried to rename my babel config file to babel.config.js.

[Manoz]

Oh... I think I got it... I don't really need a babel config file since everything I wanted to do with Babel on my own is made with all my Gatsby plugins. Right?

[Manoz]

I'm dumb. It works. I was using my old custom babel config from one of my boilerplate but didn't need it since Gatsby does everything for me as a "static site generator" :D

[rdela]

@Manoz not dumb _at all_, we all need help all the time. All of this stuff is super complicated, intricate, and confusing no matter how long one does it for, or how much or how little one knows.

I agree with your final determination that if your build is working without the .babelrc it means you don't need it and it is superfluous, either because no transformations are needed or because Gatsby and plugins are handling all necessary transformations.