Polyfills in 2019 for IE11

Question

This is 2019, we would like to support IE11 when we don't have anything better to do of our time and I have to admit that I am a bit confused about all the polyfills available.

• babel-polyfill seems to recommend core-js
• core-js
• es5-shim and es6-shim

As far as I understand all those things are supposed to enable newer version of Ecmascript but not to patch the rest. I have a couple custom polyfills, e.g. to support CustomEvent.

I don't think it changes anything, but I am using:

• webpack 2.7.0
• babel 6.16

Right now at the top of my main script I have:

require('core-js');

But I still get:

Object doesn't support property of method 'Symbol(Symbol.iterator)_a.Kr7pt1C'

Which seems to be mostly an unsupported Ecmascript iteration feature.

Any advice on what to do at the macro level of the problem?

EDIT

The Symbol.iterator is actually by a missing "for ... of " polyfill.

EDIT: SOLUTION

My full configuration is visible in this answer Include node_modules directory in Babel 7

Solution 1

Since you are using Babel for transpilation, you can use the @babel/preset-env preset and set your target environment to be IE11*.

1. Install the preset: yarn add @babel/preset-env --dev

2. Configure your targets in your Babel config:

{
  "presets": [
    ["@babel/presets-env", {
      "targets": {
        "browsers": {
          "ie": "11"
        }
      },
    }]
  ]
}

*From the docs

@babel/preset-env takes any target environments you've specified and checks them against its mappings to compile a list of plugins and passes it to Babel.

Solution 2

In the official documentation, it says "In order to use Iterators you must include the Babel polyfill." You could try to install it with npm install --save @babel/polyfill and use it with require("@babel/polyfill") at the top of the entry point to your application.

The polyfill is provided as a convenience but you should use it with @babel/preset-env and the useBuiltIns option so that it doesn't include the whole polyfill which isn't always needed. Otherwise, we would recommend you import the individual polyfills manually.

You could also try to import core-js/fn/symbol/iterator.js.

Comments

[Toskan]

full of typos.... for me as well, e.g. imho should be { "presets": [ ["@babel/preset-env", { "targets": { "ie": "11" } }] ] } but: get problem with find and entries in IE11.... so doesnt even work for me

[Richard Medeiros]

importing e-js/fn/symbol/iterator.js in my polyfills.ts worked like a charm

[thegreenpizza]

Targets.browsers is a string or array of strings. To specify browser targets in the way described above, it should be "targets": { "ie": "11" }