Webpack 4 + Babel 7.4.0 + Babel Polyfill

Question

I am trying to improve the support for my application which is written in ES6 via @babel/polyfill and the browserslist support. I've followed all the instructions over on https://babeljs.io/docs/en/babel-polyfill but I think I am missing something.

My browserslist support is defined via my package.json. I am validating whether the install has worked by checking for Array.from (which is used throughout the code) polyfill.

Any ideas why I can't see the polyfills in the compiled code? I use to declare the polyfill in the entrypoint, but the babel docs now says this isn't needed.

If useBuiltIns: 'usage' is specified in .babelrc then do not include @babel/polyfill in either webpack.config.js entry array nor source. Note, @babel/polyfill still needs to be installed.

 ...
  "browserslist": [
    "last 2 version",
    "> 1%",
    "IE 10"
  ],
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.4.2",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.0-beta.4",
    "babel-preset-env": "^1.7.0",
    "chromedriver": "^2.41.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^1.0.0",
    "cssnano": "^4.1.4",
    "env2": "^2.2.2",
    "file-loader": "^1.1.11",
    "html-critical-webpack-plugin": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "lunr": "^2.3.5",
    "mini-css-extract-plugin": "^0.4.1",
    "nightwatch": "^0.9.21",
    "node": "^7.10.1",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "replace-in-file-webpack-plugin": "^1.0.6",
    "sass-loader": "^7.0.3",
    "selenium-server": "^3.14.0",
    "selenium-standalone": "^6.15.6",
    "style-loader": "^0.21.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.2.1",
    "webpack-merge": "^4.1.3"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.0",
    "bootstrap": "^4.1.3",
    "handlebars": "^4.1.0",
  }

My .babelrc file looks like the following:

{
    "presets": [
        [
            "@babel/preset-env", {
                "useBuiltIns": "usage"
            }
        ]
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"],
}

My webpack file looks like this:

{
    test: /\.js$/,  
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    }
}]

Answer 1

As of Babel 7.4.0, @babel/polyfill has been deprecated. With Babel 7.4.0 there has been changes to the way polyfilling works. All those polyfills that were provided in @babel/polyfill were provided by a package called core-js. Babel 7.4 uses the newest version of this package, core-js@3, which is incompatible with the previous version (core-js@2), so we will have to make some changes to our config.

Here's what we can do now:

• Update @babel/core and @babel/preset-env

• Remove @babel/polyfill from the dependencies. Since core-js is now being used directly for the polyfills.

• Install the newest version of core-js

npm install --save core-js@3

And lastly, Migrate from core-js@2 to core-js@3

Since versions 2 and 3 of core-js are incompatible with each other, it isn't enabled by default.

If you are using @babel/preset-env, you need to enable the corejs: 3 option in .babelrc:

presets: [
  ["@babel/preset-env", {
    useBuiltIns: "usage", // or "entry"
    corejs: 3,
  }]
]

As mentioned here

When using core-js 3, the useBuiltIns: "entry" option not only transforms import "core-js" imports, but also regenerator-runtime/runtime and all the nested core-js entry points.

Please follow this official documentation link for more information.

Also, now we don't need to import core-js to every other file where our fancy stuff resides.