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?
Jeff M :
Solution:\n\n// gatsby-node.js\n\nexports.modifyWebpackConfig = ({ config, stage }) => {\n if (stage === \"build-javascript\") {\n config._config.entry.app = [\"babel-polyfill\", config.resolve().entry.app];\n }\n\n return config;\n};\n\n\nThe only dirty part is accessing the private (underscore prefixed) _config property. In theory, the more appropriate solution would have gone like this:\n\nexports.modifyWebpackConfig = ({ config, stage }) => {\n if (stage === \"build-javascript\") {\n config.merge({\n entry: {app: [\"babel-polyfill\", config.resolve().entry.app]}\n });\n }\n\n return config;\n};\n\n\nThe 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.",
2018-07-18T03:47:15