gatsby build issues - likely async related

[gbailey4]

Description

Upon running gatsby build the build process crashes on the minify js portion.

Environment

Gatsby version:
1.9.158
Node.js version:
8.9.1
Operating System:
macOS 10.13.3

File contents (if changed):

gatsby-config.js: no change
package.json: no change
gatsby-node.js: no change
gatsby-browser.js: no change
gatsby-ssr.js: no change

Actual result

error thrown:
Error: component---src-pages-index-js-cfc2a63fd364824d8a69.js from UglifyJs SyntaxError: Unexpected token operator «*», expected punc «(» [./src/components/CreateLuncher.js:50,19]

Expected behavior

successful build of project

Steps to reproduce

1. Build the repo here:
https://github.com/gbailey4/SimpleLunch

2.
The specific file that is throwing the error is here:
https://github.com/gbailey4/SimpleLunch/blob/master/src/components/CreateLuncher.js

...

[m-allanson]

@gbailey4 I had a go at fixing this, based on @Kalcode's comment .

First install a couple of babel plugins:
npm i babel-plugin-transform-regenerator

Then add the following to your gatsby-node.js file:

 exports.modifyBabelrc = ({ babelrc }) => ({
    ...babelrc,
    plugins: babelrc.plugins.concat(['transform-regenerator']),
  })

That left the build with a _different_ error, which looks like it's related to trying to run browser code in Node. I'm not familiar with Apollo but if it should be client-only code, you'll need to check you're in a browser before running it. There's a bit more info at https://www.gatsbyjs.org/docs/debugging-html-builds/

[gbailey4]

Thank you very much. I actually forgot about the other error, but do have a fix for that. I will trust your fix soon and hope it goes as predicted!

[gbailey4]

OK, so I was able to get it working. I fixed the issue with Apollo through some process.browser handling. Then, however, I needed to add the module 'regenerator-runtime' in dev dependancies and in the file with an async function import 'regenerator-runtime/runtime';

That worked upon doing gatsby build! Thanks so much for your help, this was a huge help.

[gscottqueen]

Had the same alert with async/await, @m-allanson is right on with the transform-regenerator recommendation.

UPDATED: To follow back up on a related issue when implementing...

The above fix worked when running 'gatsby build' for production, but I ran into another console error running 'gatsby develop'

_"Uncaught (in promise) ReferenceError: regeneratorRuntime is not defined"_

to resolve, I included babel-plugin-transform-runtime as a dev dependincy and concat it with our generator.

exports.modifyBabelrc = ({ babelrc }) => ({
  ...babelrc,
  plugins: babelrc.plugins.concat(
    ['transform-regenerator'],
    ['transform-runtime']
  ),
})

[cdock1029]

This is the simplest solution I could find to solve both dev and prod which did not require import-ing anything in code:

My .babelrc file:

{
  "env": {
    "development": {
      "plugins": ["transform-async-to-generator"] // also works, but older: "syntax-async-functions"
    },
    "production": {
      "plugins": ["transform-regenerator", "transform-runtime"]
    }
  }
}

[imcodingideas]

I have my fix similar to @gscottqueen but in gatsby-browser.js I added

exports.onClientEntry = () => {
  require('babel-polyfill')
}

[hassanshaikley]

hey all, I seem to be running into something similar? I am using async/awaits in some plugins.

Got these errors:

So I tried:

exports.onCreateBabelConfig = ({ actions }, pluginOptions) => {
    actions.setBabelPlugin({
        name: `@babel/plugin-transform-regenerator`
    })
    actions.setBabelPlugin({
        name: `@babel/plugin-transform-runtime`
    })
}

And the errors still look exactly the same!

[peter-mouland]

@hassanshaikley this looks more like a 404. what is the response from that js url?