Gatsby: Build Fail: UglifyJs cannot minify generator function

[JackWReid]

When running gatsby build on this project. I get the following error:

Error: component---src-pages-index-js-a3ebb96f3fe42e5f6e93.js from UglifyJs
SyntaxError: Unexpected token operator «*», expected punc «(» [component---src-pages-index-js-a3ebb96f3fe42e5f6e93.js:3028,42]

After investigation it seems that this method in src/components/CurrentlyReading.js:

async componentDidMount() {
  const response = await fetch('https://api.jackreid.xyz/reading');
  const readingData = await response.json();
  this.setState({ readingData });
}

is transpiled into:

var _ref = _asyncToGenerator(function* () {
  var response = yield fetch('https://api.jackreid.xyz/reading');
  var readingData = yield response.json();
  this.setState({ readingData: readingData });
});

function componentDidMount() {
  return _ref.apply(this, arguments);
}

So it looks like the build is generating an async generator syntax that uglify can't handle. For now the only workaround I can think of is deleting or commenting out the uglify section of node_modules/gatsby/dist/utils/webpack.config.js as a prebuild step. Any guidance would be appreciated.

[JackWReid]

For now I've just changed the async componentDidMount() method to a syncronous one with a then-able synax inside.

  componentDidMount() {
    fetch('https://api.jackreid.xyz/reading')
    .then(response => response.json())
    .then(readingData => this.setState({ readingData }));
  }

Still, it seems like a bug that part of the build process can turn valid React into JS at a stage that the uglifier config can't cope with, no?

[secretfader]

I'm seeing a similar issue in one of my projects. Even though I'm pulling from a library (which is compiled down to ES5), I'm still encountering the following error: SyntaxError: Unexpected token punc «}», expected punc «:».

Yet, since they're both Uglify errors, I bet they're related.

[m-allanson]

@JackWReid I think this will be solved with Gatsby version 2, when webpack and it's related dependencies will all be updated. Until then if you want to keep using async functions, this might be helpful? https://github.com/gatsbyjs/gatsby/issues/3931#issuecomment-364414141

@nicholaswyoung Your error looks slightly different... Could you create a new issue for this? If you can create an example repo that'd be very useful too!

[secretfader]

@m-allanson But we shouldn't have to upgrade to Gatsby 2 to eliminate this error. Gatsby 1 should continue to work fine if configured properly. 😉

The site in question on my end has been running Gatsby 1.0 since the prereleases. It's a fairly large site, and I don't have the time to create a repro at the moment. I think this is a bug, potentially with a wider footprint than you originally surmised.

[m-allanson]

Gatsby 1 should continue to work fine if configured properly.

@nicholaswyoung I agree! I'm not fully familiar with Gatsby's babel / webpack / Uglify setup, but the issue you're seeing seems to be this: https://github.com/gatsbyjs/gatsby/issues/3780, which sounds like it has no easy answer.

For a "quick fix" or workaround you might need to find where your es6 code is coming from (assuming that's what the issue is), then polyfill or remove it?

[KyleAMathews]

@nicholaswyoung the version of uglify we're using doesn't support es6 — we also don't compile code in node_modules. We're considering following CRA's lead and adding limited support for compiling code in node_modules but we won't do this until Gatsby v2 https://github.com/facebook/create-react-app/pull/3776

In the meantime, if you're using a dependency that ships es6 code, you'll either need to vendor the code or fork the package and publish an es5 version.

We know this isn't a great solution and we're sorry. If you look at the CRA repo, there's tons of people complaining about this as well so it's something that the whole ecosystem is facing as JavaScript moves forward but we web folks are still supporting older browsers.

[JackWReid]

That workaround looks nice @m-allanson, thanks! Out of interest what's the timeline for v2?

[m-allanson]

I don't think there is a timeline, but you can see progress here: https://github.com/gatsbyjs/gatsby/projects/2

[m-allanson]

Closing this as there's no further action to be taken here. Please re-open or create a new issue if I'm wrong!

[stefanwille]

How about a warning in the documentation about async/await not working?
I have wasted quite a bit of time to find this out.