Do I need to import @babel/polyfill?

[airblade]

Hello!

I'm using Webpacker 3.5.5. I write ES6 JavaScript code and I want it to work on evergreen browsers and IE11.

In my .babelrc I am targetting browsers which include IE11:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": "> 1% in GB, last 2 Firefox versions",
        "uglify": true
      },
      "useBuiltIns": true
    }]
  ],

  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }]
  ]
}

However on IE11 I get the error: ReferenceError: 'Symbol' is undefined.

On the ES6 wiki page, it says:

We have also included babel polyfill that includes a custom regenerator runtime and core-js.
Don't forget to import @babel/polyfill in your main entry point like so: [...]

However when I switch on webpacker's debug output, it seems to be generating lots of polyfills. Do I need to import "@babel/polyfill" in addition to my browser list setting in .babelrc?

Also, the wiki page mentions:

The Webpacker installer sets up a standard babel.config.js file in your app root...

I don't have babel.config.js. Does that matter?

Many thanks in advance!

[p0wl]

If you use webpacker v3 (and therefore babel 6) you need to import 'babel-polyfill'; in your entry file (packs/application.js or similar).

When you switch to webpacker v4, you need to switch to import '@babel/polyfill'; and use the babel.config.js that comes with webpacker v4.

The polyfill works that way, that babel will replace the import 'babel-polyfill'; statement with the list of polyfills that need to be included from core-js based on your targeted browsers.

Does importing babel-polyfill instead of @babel/polyfill solve your problem?

[airblade]

Thanks for the explanation. That's already helping :)

I wasn't importing @babel/polyfill or babel-polyfill.

When I add import 'babel-polyfill' at the top of packs/application.js, the problem goes away. However I diffed the debug output with and without import 'babel-polyfill' and there's no difference in the plugins and polyfills it uses. Is that expected?

[p0wl]

Hmm, hard to tell without knowing the setup. If you use something like source-map-explorer on your generated file (& sourcemap) you should be able to see core.js (especially es6.symbol.js):

If this is true with and without import 'babel-polyfill';, it might be the case that your bundle includes core-js but no one is requiring it, therefore it is not executed. I don't why exactly, but maybe the babel-preset-env includes core-js in the bundle by default and since the import is missing, it is not used.

With babel-preset-env (which you are using), babel replaces the import of babel-polyfill with the require statements that you need for your bundle and browser env configuration: https://babeljs.io/docs/en/babel-preset-env#usebuiltins-entry (this is for babel 7, you are using babel 6, but I think it is still valid)

So in your case babel transpiles

import 'babel-polyill';

to

import "core-js/modules/es6.symbol.js";
import "core-js/modules/es6.promise.js";
// ...

This is my understanding, which I just got yesterday when upgrading to webpacker v4. I hope it helps =)

[airblade]

it might be the case that your bundle includes core-js but no one is requiring it, therefore it is not executed. I don't why exactly, but maybe the babel-preset-env includes core-js in the bundle by default and since the import is missing, it is not used.

This sounds plausible though I'm not sure how to prove it.

Anyway, I think the answer to my original question is yes. Thanks, Paul, for your help!

[gregblass]

Figured I'd post here in case anyone finds this via google - it looks like @babel/polyfill is now depreciated in favor of core-js.

[jakeNiemiec]

Thank you for posting this. More info in the PR #2031