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

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