I created this gist in order to help myself and others keep track of tips and tricks in order to make Gatsby v2 play nicely with Internet Explorer 10 and 11.
This is experience based. Please share your experiences when you have a solution to a problem.
If you suspect that an es6-based module is breaking your app, then try to add gatsby-plugin-compile-es6-packages and include the package as one of the modules.
Currently I know of the following modules that breaks the app:
- reactn
- use-events
- react-use-scrollspy
Please do message me if you come across any modules that needs external compilation.
Just detect browser and only show conflicting stuff if the browser is not IE10/11.
React need a few things to work with older IE. Add these in the very top of your gatsby-browser.js and you are good to go:
import 'core-js/modules/es6.set';
import 'core-js/modules/es6.map';
import 'raf/polyfill';
Sometimes the @babel polyfill needs run first - before React and ReactDOM etc.
This is typically to do with the es6 Symbol operator, but can be anything.
The following snippet in gatsby-node.js helps with that (remember to add @babel/polyfill to your modules).
From @stripeyjumper.
exports.onCreateWebpackConfig = ({
stage,
getConfig,
actions: { replaceWebpackConfig }
}) => {
switch (stage) {
case 'build-javascript':
// We want to include the babel polyfills before any application code,
// so we're inserting it as an additional entry point. Gatsby does not allow
// this in "setWebpackConfig", so we have to use "replaceWebpackConfig"
const config = getConfig();
const app =
typeof config.entry.app === 'string'
? [config.entry.app]
: config.entry.app;
config.entry.app = ['@babel/polyfill', ...app];
replaceWebpackConfig(config);
}
};
For react-spring to work with IE, the following is needed:
String.prototype.startsWith
Object.entries
Array.prototype.includes
Array.prototype.findIndex
Set
If you came down here, your need is bad. This is for inspiration.
The following made a difference for me:
- Adding a polyfill for Object.assign from MDN in the
wrapPageElement-method forgatsby-browser.js - Adding a polyfill for Object.entries from MDN in the
onClientEntry-method forgatsby-browser.js - Not using
gatsby-plugin-layoutbut manually creating the same functionality (Symbol was the bugger here, I think)
Thanks for the gist! I had trouble with swiper and its direct dependency dom7 – both using es6+ syntax. Adding them to
gatsby-plugin-compile-es6-packagesmodules solved my problem. Thanks again!