"gatsby build" breaks when dependencies use es6 code (which Uglify doesn't support)

[szimek]

Description

After upgrading Gatsby to 1.9.167, I'm getting the following error when I try to run gatsby build:

error Generating JavaScript bundles failed

  Error: component---src-templates-post-jsx-dbdaebf346a9292b96a8.js from UglifyJs
  SyntaxError: Unexpected token: name (isLastCharLower) [./~/camelcase/index.js:4,0]

The line mentioned in the error contains keyword let. Looks like (at least) dependencies are no longer compiled to ES5 and UglifyJS version used by Gatsby doesn't understand ES6+, so it throws an error.

The same app works fine with 1.9.166. It's most likely caused by some changes introduced in #3369, other changes introduced in this version don't look suspicious.

To replicate this issue create a new Gatsby project, run yarn add camelcase, import and call camelcase in any component and run gatsby build.

[617dev]

i am also seeing this. except for me it's running out of memory when trying to build the JS bundles, however pinning to the version you mentioned 1.9.166 works fine...
@szimek when you say some code isn't being compiled to ES5, do you know which code? I'd like to see if ES5-ing it would fix the error with the newer versions to prove your theory...

[szimek]

In my case it's caused by camelcase package (which is a dependency of a markdown to html library I'm using), but there are others available only in ES6 as well. This error has already been reported sindresorhus/camelcase#21 and it won't be "fixed" - more info about that sindresorhus/ama#446, which makes perfect sense from the maintainer point of view.

However, this means that all dependencies should also be compiled by Babel to ES5, because they might be written in ES6, so even if Gatsby started using UglifyJS2, which does support ES6 syntax, it would break in older browsers that don't support ES6.

[ryami333]

Experiencing this too - big dealbreaker as far as I'm concerned.

[KyleAMathews]

Gatsby has never compiled code in node_modules to es5. If you're seeing problems then it's because either an existing dependency of yours started shipping es6 code or (more likely) you added a new dependency with es6 cod which broke uglify.

CRA will be compiling code in node_modules w/ babel starting in their v2 which we can consider as well.

facebook/create-react-app#3776

@szimek that PR only affects the Typescript plugin. We haven't changed anything related to Babel in a long time.

@alexjsdev are you using the typescript plugin?

[ryami333]

I would have thought so too @KyleAMathews, but I can verify that it builds correctly on Gatsby 1.9.166 but not on the latest (1.9.178 at time of writing), so whether or not the dependency in question has changed is irrelevant (and it hasn't, I checked).

[KyleAMathews]

@ryami333 fair enough — could you post a link to a site reproducing this problem? All the example sites and gatsbyjs.org are still building correctly AFAIK so something reproducing this would be great.

[ryami333]

I'll see what I can do, but it might take a little while. In the meantime, I verified that the break is between builds 1.9.166 and 1.9.167.

[617dev]

@KyleAMathews no we are not using typescript, just the out of the box gatsby starter setup, with what was the latest Gatsby at the time which was 1.9.176 (i believe). We would get an UglifyJS running out of memory error when Gatsby would try to compile our JS bundles, but then i found this thread and based on @szimek suggestion tried pinning the version to 1.9.166 and voila! it works... I'm not sure what changed, do you have a changelog for each version, or like a tagged merged commit for each where I could try to help figure this out? I really don't want to leave the version pinned.

On a side note, I tried updating to the latest a few days ago (1.9.177) and although gatsby would successfully run develop if i ran a build it would hang on createPagesStatefully forever... so different behavior (than the uglify JS error but still no functional build)

Thanks for all your help! And btw Gatsby is truly genius!

[617dev]

@KyleAMathews just saw that there's a newer version 1.9.178 and it looked like there was a fix merged for the hanging i was talking about... well it's true it doesn't hang there anymore but this is back now 😢:

error Generating JavaScript bundles failed

  Error: app-45a58aeb1a29bc012abd.js from UglifyJs
  RangeError: Maximum call stack size exceeded```

[ryami333]

@alexjsdev is your issue actually related to the OP? Have you verified that your dependency is indeed ES6?

[ryami333]

@KyleAMathews I've created a demo repo here, based on gatsby-starter-default.

• Commit 1, initial commit (fresh gatsby-starter-default).
• Commit 2, demonstrate successful build with ES6 dependency on 1.9.166.
• Commit 3, demonstrate failing build with 1.9.167.
• Commit 4, demonstrate failing build on latest release.

[szimek]

@KyleAMathews

Gatsby has never compiled code in node_modules to es5.

You're right. Turns out that Gatsby 1.9.166 and earlier versions silently skip the minification of a file, if it uses ES6 syntax after bundling, e.g. when I use camelcase library in one of pages. If I use it in pages/index.js, all files will be minified except public/component---src-pages-index-js-xxx.js. Gatsby 1.9.167 and later versions throw an error in this case.

According to facebook/create-react-app#1125 (comment) it's not safe to run Babel 6 on node_modules and Babel 7 will be added in Gatsby v2, right?

Here's PR that adds compiling dependencies with babel-preset-env to create-react-app: facebook/create-react-app#3776