Gatsby: `gatsby develop` throwing errors with IE11

[joeattardi]

Description

When I run gatsby develop, then open my site in IE11, I immediately get an error in the console and the page doesn't load:

'Promise' is undefined

The error is occurring in commons.js, at this location:

var enterHotUpdate = function enterHotUpdate() {
  Promise.resolve(incrementHot()).then(function () {
    return setTimeout(decrementHot, 0);

Note that this issue only happens with gatsby develop. If I do gatsby build, then gatsby serve, the site loads fine.

Site source code can be found here: https://github.com/joeattardi/react-snackbar-alert/tree/master/examples

Steps to reproduce

1. Run gatsby develop
2. Open the site in IE11

Expected result

The site should load

Actual result

A JavaScript error is thrown about 'Promise' is undefined

Environment

System:
OS: macOS 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Shell: 5.3.1 - /usr/local/bin/zsh
Binaries:
Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
npm: 6.9.0 - ~/.nvm/versions/node/v10.15.3/bin/npm
Languages:
Python: 2.7.13 - /usr/local/bin/python
Browsers:
Chrome: 74.0.3729.169
Firefox: 58.0.2
Safari: 12.1.1
npmPackages:
gatsby: ^2.6.0 => 2.6.0
gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
npmGlobalPackages:
gatsby-cli: 2.6.2

[impulsivetomato]

Also getting this error

[DSchau]

Interesting! This shouldn't have been new, but does appear to be coming from react-hot-loader.

Specifically, we do provide some polyfills for IE, notably the event-source-polyfill

However, it doesn't look like we're loading any polyfills in development (and also we're using @babel/preset-env usage to load polyfills in the build lifecycle--e.g. if a src/ file uses a Proxy, we will load a Proxy polyfill).

I think this is something we'll want to iron out, but in the interim, does the following work as a workaround for this use case? You'll want to edit gatsby-node.js with the following contents:

exports.onCreateWebpackConfig = function onCreateWebpackConfig({ actions, stage, loaders }) {
  if (stage === 'develop') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-hot-loader/,
            use: [
              loaders.js()
            ]
          }
        ]
      }
    })
  }
}

[joeattardi]

@DSchau I will try this out later this evening and report back. Thanks!

[joeattardi]

@DSchau I tried adding this to gatsby-node.js, but when I run gatsby develop I get the error:

  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
   - configuration.module.rules[10].use should be one of these:
     non-empty string | function | object { ident?, loader?, options?, query? } | function | [non-empty string | function | object { ident?, loader?, options?, query? }]
     -> Modifiers applied to the module when rule is matched
     Details:
      * configuration.module.rules[10].use should be a string.
      * configuration.module.rules[10].use should be an instance of function
      * configuration.module.rules[10].use should be an object.
      * configuration.module.rules[10].use should be an instance of function
      * configuration.module.rules[10].use[0] should be a string.
      * configuration.module.rules[10].use[0] should be an instance of function
      * configuration.module.rules[10].use[0] has an unknown property 'test'. These properties are valid:
        object { ident?, loader?, options?, query? }
      * configuration.module.rules[10].use[0] has an unknown property 'exclude'. These properties are valid:
        object { ident?, loader?, options?, query? }
      * configuration.module.rules[10].use[0] has an unknown property 'use'. These properties are valid:
        object { ident?, loader?, options?, query? }

[DSchau]

Whoops - small typo!

exports.onCreateWebpackConfig = function onCreateWebpackConfig({ actions, stage, loaders }) {
  if (stage === 'develop') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-hot-loader/,
            use: [
              loaders.js()
            ]
          }
        ]
      }
    })
  }
}

that _should_ do the trick!

[joeattardi]

That seems to work! I have my gatsby develop running in IE11 now.

Thank you!

[erikjalevik]

I'm not able to use develop in IE11 either, but I get a different error:

SCRIPT1014: Invalid character
commons.js (105106,68)

Adding the webpack config above unfortunately does not help. Any ideas?

[al-marchenko]

Also do I

SCRIPT1002: Syntax error
commons.js (108997,16)

looks like it stumbles over arrow function.

[himynameistimli]

If you click the link to the common.js file you can find the offending module causing the issue.

For me, it was related to arrow functions and the query-string module, so I just had to install v5 (the last version that works with IE) directly. This plus the fix above worked for me on develop.

[edwardjin01]

Hi @himynameistimli , how do i know which module causing the issue ?

[scottschup]

that _should_ do the trick!

I've been wrestling with this issue for days! Thanks so much for that!

[lablancas]

I had to add this to gatsby-node.js to get IE11 when running gatsby develop

Note: make sure you install core-js as a dependency

exports.onCreateWebpackConfig = function onCreateWebpackConfig({ actions, stage, getConfig }) {
  const config = getConfig()
  if (stage === 'develop') {
    config.entry.commons.unshift(require.resolve('core-js'))
    actions.replaceWebpackConfig(config)
  }
}

[greatwitenorth]

@lablancas Thanks, that worked for development, but when I got to build the site and test on ie11 I get errors again. Did you have the same issue?

[lablancas]

@greatwitenorth no. I have my site working on IE11 and it's live. What errors are you getting from IE11?

[TimFletcher]

None of these suggested fixes work for me on a simple gatsby new ie-11-test. IE 11 (run via the official MS VM in VirtualBox on a Mac) throws:

Expected identifier
commons.js (4824,7)

This appears to be due to object destructuring:

Which (obviously) is foreign to IE 11, so I need to somehow ensure this code is run through babel.

I'm using the latest version of Gatsby:

$ gatsby --version
Gatsby CLI version: 2.8.29
Gatsby version: 2.19.43

[TimFletcher]

Ahh.... I've made some progress. If I tweak @DSchau's solution to use react-refresh-webpack-plugin instead of react-hot-loader then it seems to work:

exports.onCreateWebpackConfig = function onCreateWebpackConfig({
  actions,
  stage,
  loaders,
}) {
  if (stage === "develop") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-refresh-webpack-plugin/,
            use: [loaders.js()],
          },
        ],
      },
    })
  }
}

[persocon]

Ahh.... I've made some progress. If I tweak @DSchau's solution to use react-refresh-webpack-plugin instead of react-hot-loader then it seems to work:

exports.onCreateWebpackConfig = function onCreateWebpackConfig({
  actions,
  stage,
  loaders,
}) {
  if (stage === "develop") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-refresh-webpack-plugin/,
            use: [loaders.js()],
          },
        ],
      },
    })
  }
}

sadly this doesn't work for me, on the 2.20.22 version,
it was working fine when they had the react-hot-loader instead, also why the change? it's experimental the other library :(

[TimFletcher]

@persocon I've not updated since dealing with this and likely won't be given your report. :(

I also took the approach of running gatsby build && gatsby serve which I appreciate will take 30s for every code change but at least you'll be able to see your site in IE 11. Performance was virtually unusable when running gatsby develop through an IE11 VM anyway.