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 do the import.

I've tried importing in the layout index.js, but when I do then gatsby build fails with Module build failed: Error: only one instance of babel-polyfill is allowed.
I've tried requiring in gatsby-browser.js and gatsby-node.js, which builds, but when I do that then the error in IE still occurs as if babel-polyfill never loaded.
I've tried requiring in gatsby-config.js, but when I do then gatsby build fails again.

What am I supposed to do?

回答1:

Solution:

// gatsby-node.js

exports.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.

回答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.

来源：https://stackoverflow.com/questions/51390557/gatsby-import-babel-polyfill

标签

javascript

gatsby