[v2] IE 11 'Promise' is undefined error

[tomastech]

Description

IE 11 throws "Unhandled promise rejection ReferenceError: 'Promise' is undefined" error in v2 sites. This can be observed at next.gatsbyjs.org and can replicate it locally on my site. Including promise polyfill fixes the issue, but from looking at documentation babel-polyfill is meant to handle that based on defined browsers list.

Steps to reproduce

• Open next.gatsbyjs.org in IE 11
• Observe "Unhandled promise rejection ReferenceError: 'Promise' is undefined" error thrown in console longs

Expected result

No promise related errors.

Actual result

Unhandled promise rejection ReferenceError: 'Promise' is undefined
   "Unhandled promise rejection"
   {
      [functions]: ,
      __proto__: { },
      description: "'Promise' is undefined",
      message: "'Promise' is undefined",
      name: "ReferenceError",
      number: -2146823279,
      stack: "ReferenceError: 'Promise' is undefined
   at t.components.component---src-pages-index-js (https://next.gatsbyjs.org/app-ba276550eb4051a9bc0a.js:6:70060)
   at Anonymous function (https://next.gatsbyjs.org/app-ba276550eb4051a9bc0a.js:6:32261)
   at O (https://next.gatsbyjs.org/app-ba276550eb4051a9bc0a.js:24:11838)
   at S (https://next.gatsbyjs.org/app-ba276550eb4051a9bc0a.js:6:31869)
   at E (https://next.gatsbyjs.org/app-ba276550eb4051a9bc0a.js:6:32413)
   at A.getResourcesForPathname (https://next.gatsbyjs.org/app-ba276550eb4051a9bc0a.js:6:34343)
   at Anonymous function (https://next.gatsbyjs.org/app-ba276550eb4051a9bc0a.js:24:17870)
   at a (https://next.gatsbyjs.org/app-ba276550eb4051a9bc0a.js:24:10747)
   at Anonymous function (https://next.gatsbyjs.org/app-ba276550eb4051a9bc0a.js:24:10894)
   at c (https://next.gatsbyjs.org/app-ba276550eb4051a9bc0a.js:24:8307)"
   }

Environment

This is from my own site directory.

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i5-4670 CPU @ 3.40GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.1 - /usr/local/bin/node
    Yarn: 1.6.0 - /usr/local/bin/yarn
    npm: 6.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 67.0.3396.87
    Firefox: 60.0.1
    Safari: 11.1.1
  npmPackages:
    gatsby: ^2.0.0-beta.9 => 2.0.0-beta.9 
    gatsby-plugin-glamor: ^2.0.0-beta.2 => 2.0.0-beta.2 
    gatsby-plugin-manifest: ^2.0.2-beta.2 => 2.0.2-beta.2 
    gatsby-plugin-netlify: ^2.0.0-beta.2 => 2.0.0-beta.2 
    gatsby-plugin-offline: ^2.0.0-beta.2 => 2.0.0-beta.2 
    gatsby-plugin-react-helmet: ^3.0.0-beta.2 => 3.0.0-beta.2 
    gatsby-plugin-sitemap: ^2.0.0-beta.2 => 2.0.0-beta.2 
  npmGlobalPackages:
    gatsby-cli: 2.0.0-beta.1

File contents (if changed)

gatsby-config.js: N/A package.json: N/A gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

[roachnt]

@KyleAMathews is this an issue that persists throughout all v2 sites?

[roachnt]

After moving my site to v2, I'm getting the same issue. Looking into it now.

[roachnt]

After doing some digging, I found a difference between the babel-preset config in v1 and in v2. It seems that in the nodeConfig, the target.node has changed from 4.0 to 6.0. I know that changing node versions can cause issues with certain functions in Babel. Also, there seems to be no explanation for this change in any commit messages, and this change took place in the migration from v1 to v2. I'm not sure if this is the issue, but it seems suspicious. Any thoughts?

[m-allanson]

cc @pieh

[KyleAMathews]

@roachnt there's two targets — node & browser. So for compiling Gatsby's browser runtime code, we target ie9+ https://github.com/gatsbyjs/gatsby/blob/master/.babel-preset.js#L9-L22

Our default browserlist passed to babel-preset-env for compiling your user code is https://next.gatsbyjs.org/docs/browser-support/ Which should include ie11.

But yeah, it doesn't seem for some reason that the Promise polyfill is being loaded correctly.

[pieh]

I tracked it down to https://github.com/gatsbyjs/gatsby/pull/5637 - reverting that "fixes" it. Seems like babel doesn't find Promise in transpiled cache-dir code and doesn't add Promise polyfill.

[superbull]

This error still exists during development, with Gatsby develop.

Production is OK, with Gatsby build.

Gatsby version: 2.6.2

[drake-smith]

This error is still occurring for me too on Gatsby develop. I am using Gatsby v2.10.5.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[johndaskovsky]

We're running Gatsby 2.13.83 in production and are seeing this issue on IE11

[drake-smith]

@superbull @johndaskovsky I was able to resolve this by adding the code in gatsby-node from this post: https://github.com/gatsbyjs/gatsby/issues/14502#issuecomment-498377468