gatsby: `gatsby develop` throwing errors with IE11

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

Run gatsby develop
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® Core™ 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

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 18 (4 by maintainers)

Most upvoted comments

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

+11

TimFletcher on Mar 16, 2020

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!

+11

DSchau on Jun 3, 2019

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.

+10

himynameistimli on Jul 28, 2019

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()],
          },
        ],
      },
    })
  }
}

TimFletcher on Mar 16, 2020

Also getting this error

lobaak on Jun 3, 2019

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

Thank you!

joeattardi on Jun 3, 2019

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

TimFletcher on May 28, 2020

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

lablancas on Mar 6, 2020

Also do I

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

looks like it stumbles over arrow function.

al-marchenko on Jul 26, 2019

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?

erikjalevik on Jul 23, 2019