Gatsby Import Babel Polyfill

The root issue I'm running into is IE11 fails with Object doesn't support property or method 'find'. It seems I need to import babel-polyfill, but I can't find the right place to d

Solution 1:

Answer :

// gatsby-node.jsexports.modifyWebpackConfig = ({ config, stage }) => {
    if (stage === "build-javascript") {
        config._config.entry.app = ["babel-polyfill", config.resolve().entry.app];
    }

    return config;
};

The only dirty part is accessing the private (underscore prefixed) _config property. In theory, the more appropriate solution would have gone like this:

exports.modifyWebpackConfig = ({ config, stage }) => {
    if (stage === "build-javascript") {
        config.merge({
            entry: {app: ["babel-polyfill", config.resolve().entry.app]}
        });
    }

    return config;
};

The reason this didn't work is because the original entry.app value was a string, and my new entry.app value is an array, and the merge function tries to merge the two by pushing each individual character of the original string as an element of the new array. If anyone knows how to make the better solution work, I'd love to improve this answer, but until then, the former at least works.

Solution 2:

• You could try to use babel-presets-env as the polyfill you need is included by the preset.
• Otherwise I highly recommend http://polyfill.io/ makes all these polyfiling stuff much simpler if you're fine relying on 3rd party service.