Tips for making Gatsby v2 working with IE / Internet Explorer

Making Gatsby work with Internet Explorer 10 and 11

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.

External compilation of modules

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.

Leave breaking stuff out of the SSR-version

Just detect browser and only show conflicting stuff if the browser is not IE10/11.

Polyfills

React polyfills

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';

Include @babel/polyfill in your WebpackConfig

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);
  }
};

React Spring

For react-spring to work with IE, the following is needed:

String.prototype.startsWith
Object.entries
Array.prototype.includes
Array.prototype.findIndex
Set

Crazy stuff

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 for gatsby-browser.js
Adding a polyfill for Object.entries from MDN in the onClientEntry-method for gatsby-browser.js
Not using gatsby-plugin-layout but manually creating the same functionality (Symbol was the bugger here, I think)

arnars/Gatsby v2 using Internet Explorer.md