How to add babel-polyfill

I’m using redux-saga in my gatsby app and therefore generator functions. These are causing errors in IE11 and it seems like babel isn’t polyfilling them. I’ve been trying different techniques for including babel-polyfill but none seem to work, both of these seem relevant but don’t solve my issue:

https://github.com/gatsbyjs/gatsby/issues/341 https://github.com/gatsbyjs/gatsby/issues/2177

I’m trying to do the following, but still having the same error in IE. Is there a preferred approach for solving this?

if ( stage === 'build-javascript' || stage === 'develop' ) {
    config._config.entry.commons.unshift( 'babel-polyfill' );
}

[Kalcode]

In the very top of my gatsby-browser.js file i have

import 'babel-polyfill'

is the very first line in that file.

Then in gatsby-node.js I added ‘transform-regenerator’

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

The ‘transform-decorators-legacy’ is not needed. Just showing you the exact working copy I use.

IE 11 and Edge work fine with Redux-Saga now, Saga uses generators for their side-effects.

Hope this helps.

[KyleAMathews]

Are you trying to require babel-polyfill? Or add it to the babel config?

For the 1st, require it in your layouts/index.js file or gatsby-browser.js.

For the later, add it to a .babelrc in the root of your site.