IE support: "'Promise' is undefined", bundles fail to load

🐛 bug report

Loading the dev server output in IE11 keeps bundles from loading. It’s a hard stop that prevents the base page from even attempting to continue.

Note: This is from what’s generated by parcel, not my app source code or my dependencies. See this comment below.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc

The app works in FF + Chrome (used --no-cache) without the custom .babelrc.

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "ie 11",
            "not ie <= 10"
          ]
        }
      }
    ]
  ]
}

package.json

here's the full package.json, below is the scripts and deps only

  "scripts": {
    "clean": "rimraf dist",
    "dev": "parcel src/index.html",
    "build": "run-s clean build:raw",
    "build:raw": "parcel build --public-url . src/index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "npm-run-all": "^4.1.5",
    "parcel-bundler": "^1.10.3",
    "rimraf": "^2.6.2"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "ie 11",
    "not ie <= 10"
  ]

I start the local server with npm run dev, which invokes parcel ./src/index.html.

Note: my package.json includes the relevant browserslist, which specifies IE 11.

🤔 Expected Behavior

Bundles should load correctly, including in IE 11.

😯 Current Behavior

Bundled app stops loading in IE11 almost immediately. Cites “‘Promise’ is undefined” in JS console, clicking to the line number points to the loadBundles function, which returns Promise.all(bundles.map(loadBundle)).

Also used by Parcel’s generated main js file, Promise.resolve and fetch. Specifying IE 11 support for targeted browser should ensure that no un-polyfilled APIs are used (Promise, fetch).

Raw console error:

SCRIPT5009: 'Promise' is undefined
main.1f19ae8e.js 394,27)

💁 Possible Solution

From the other linked “ie support” descriptions in the changelog and the corresponding culprits, it looks like this is has to do fundamentally with the un-polyfilled Promise and global objects, such as fetch referenced when attempting to load necessary bundles. The loadBundles fires before my app logic, so no polyfilling on my end will affect the outcome. By performing a build of my repro with manually added polyfills into the head tag for Promise and fetch, this worked; but this isn’t something I should have to do.

🔦 Context

For my work apps am required to support IE11. I believe this should be achievable w/ parcel, but ran into some trouble. The app works great in Chrome and Firefox. The issues I’m experiencing deal with Parcel’s direct use of Promise and fetch directly in the initialization of bundles from the built main.<hash>.js.

💻 Code Sample

I have an example repo:

https://github.com/edm00se/parcel-ie11-issue-demo

Steps to reproduce:

• git clone https://github.com/edm00se/parcel-ie11-issue-demo.git
• cd parcel-ie11-issue-demo
• npm install
• npm run dev
• open http://localhost:1234 in IE 11
• have a look at the js console, since the screen is blank (screen shots above)

🌍 Your Environment

Software	Version(s)
Parcel	1.10.3
Node	10.13.0
npm/Yarn	6.4.1
Operating System	Windows 10

Thank You!

I love parcel, it’s a great and performant bundler that’s enjoyable to use. When I set out on this crazy path, I wasn’t expecting to get as far as I have, and I am 99.8% there!

*note: I’ve updated this description to point to a far more simple reproducible repo

[tomasdev]

What’s the point on even having browserslist if it won’t work as expected.

[edm00se]

For any interested in this issue, I threw together a parcel plugin to add high level polyfills for both Promise and fetch to keep parcel’s bundle loader working in IE(11).

repo: https://github.com/edm00se/parcel-plugin-goodie-bag use: npm i -S parcel-plugin-goodie-bag (auto loads into index.html on build/dev)