ES7 async/await support

[kennu]

Hi. I added async/await support to my Gatsby project by adding this to gatsby-node.js:

exports.modifyWebpackConfig = function(config, env) {
  if (env === 'build-javascript' || env === 'develop') {
    const previous = config.resolve().entry
    config._config.entry = []
    config.merge({
      entry: ['babel-polyfill'].concat(previous)
    })
  }
  return config
}

And by installing the polyfill package:

npm install --save babel-polyfill

I guess this could be some kind of default in Gatsby to avoid manually messing with the entry array order.

(Tweeted about it as @kfalck, I'm also @kennu on Twitter.)

[KyleAMathews]

Hmmm... yeah normally you'd just import something like this at the top of your entry file but since Gatsby controls that you need to do this.

That being said, this is exactly why modifyWebpackConfig exists to make these sorts of customizations. I could be persuaded otherwise but is adding polyfills common enough that we want to add a new option to Gatsby just to support it? I think I'd just rather document this sort of modification really well.

Thoughts @kennu and others?

[kennu]

The ugly part seems to be in getting babel-polyfill to the beginning of the entry array. I couldn't figure out a way to do it without manually resetting config._config.entry. If that could be solved nicely, this would be a simple thing to document.

Also, I got some errors if I tweaked config._config.entry in other env stages than build-javascript and develop. Not quite sure why.

[KyleAMathews]

Perhaps the "config as a function" option would be cleaner? https://www.npmjs.com/package/webpack-configurator

But yeah, more examples of doing stuff like this with webpack-configurator would be +++

[benstepp]

So all you need is babel-polyfill at the beginning of the entry array? Maybe Array.prototype.unshift will help clean up the 'ugly'.

exports.modifyWebpackConfig = function(config, env) {
  if (env === 'build-javascript' || env === 'develop') {
    config._config.entry.unshift('babel-polyfill')
  }
  return config
}

[kennu]

I wasn't quite sure if you can just bypass config.resolve() and config.merge() and modify the variables directly.

[peonmodel]

hi, i am a little confused with how to add babel-polyfill to gatsby v 1

config.loader('js', {
			test: /\.(js|jsx)$/,
			exclude: /(node_modules|bower_components)/,
			loader: 'babel-polyfill',
		});

doesnt work

it gives

Loader <dir>/node_modules/babel-polyfill/lib/index.js?{"presets":["<dir>/node_modules/babel-preset-react/lib/index.js","<dir>/node_modules/babel-preset-es2015/lib/index.js","<dir>/node_modules/babel-preset-stage-1/lib/index.js","<dir>/node_modules/babel-preset-env/lib/index.js","<dir>/node_modules/babel-preset-stage-0/lib/index.js","<dir>/node_modules/babel-preset-react/lib/index.js"],"plugins":["<dir>/node_modules/gatsby/dist/utils/babel-plugin-extract-graphql.js","<dir>/node_modules/babel-plugin-add-module-exports/lib/index.js","<dir>/node_modules/react-hot-loader/babel.js","<dir>/node_modules/babel-plugin-transform-react-jsx-source/lib/index.js","<dir>/node_modules/babel-plugin-add-module-exports/lib/index.js","<dir>/node_modules/babel-plugin-transform-decorators-legacy/lib/index.js","<dir>/node_modules/babel-plugin-add-module-exports/lib/index.js","<dir>/node_modules/babel-plugin-transform-object-assign/lib/index.js"],"cacheDirectory":true} didn't return a function

[zhongqin0820]

do you solve this problem? @peonmodel

[peonmodel]

i have no idea but it works now... i havent updated gatsby for sometime, still using v1.0.0 i added ```js import 'regenerator-runtime/runtime'; ``` to the files using async-await

…

On Mon, Dec 18, 2017 at 12:35 AM, Zhong Qin ***@***.***> wrote: do you solve this problem? @peonmodel <https://github.com/peonmodel> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#341 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMDzUw7rjqKf-GQNF7dySlM88yZ70e90ks5tBULIgaJpZM4I_Tsu> .

[robbyemmert]

Does Gatsby support modifying the babel settings? I've tried all of the above suggestions to no avail, and I can find no documentation on how to add support for generators or async/await.

Being able to modify babel settings is a dealbreaker for me personally. Are there any plans to allow people to customize these settings, and document them?

Thanks,

[pieh]

Yes, you can modify it in 3 ways:

• by .babelrc file in root of your directory
• by adding babel field to package.json
• using gatsby node modifyBabelrc api ( f.e. https://github.com/gatsbyjs/gatsby/blob/5fd51d8cc1fab1daca2c1254447a0e479ba8c538/packages/gatsby-plugin-styled-jsx/src/gatsby-node.js )

[tompahoward]

Similar issue and solution at #3931 (comment)