Updating to Babel 7.4

In a previous post I talked about what Babel is, how to set it up with Webpack and what it can do. Since the release of Babel 7.4 there are some breaking changes to the way the polyfilling works. Let’s have a look.

Update Babel

For starters, update the following packages:

• @babel/core
• @babel/register
• @babel/preset-env

Make sure they are all at least version 7.4.

Core-js 3

As we learned in the Working with babel 7 and Wepack - post, @babel/preset-env takes care of what transforms should be applied and @babel/polyfill provides polyfills to make sure all browsers you defined in your browserlist are supported.

All those polyfills that were provided in @babel/polyfill were provided by a package called core-js, maintained by Denis Pushkarev.

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.

Updating your config

So in order to get your setup working with Babel 7.4 there are some things you have to adjust

• First of all, install the latest version of core-js

npm i core-js@3

• Update your .babelrc Make sure you explicitly set the version of core-js.

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

• Remove @babel/polyfill Since core-js is now being used directly for the polyfills, the @babel/polyfill package is being deprecated. You can remove it from your project.

npm uninstall @babel/polyfill

Manually import core-js

If you were importing @babel/polyfill directly in to your files, you should update them with the core-js package. Change

import "@babel/polyfill";

to

import "core-js/stable";
import "regenerator-runtime/runtime";

The core-js/stable point to the stable version of your currently installed core-js-package, be it version 2 or version 3. regenerator-runtime/runtime is for when you are transforming generators.

Now you should be able to use Babel as you did before.

Dive deeper

The 7.4 release came with a lot of updates. If you want to dive deeper into this, make sure to check out their official release post.