Quick way to upgrade babel in your ReactJS project

Summary

You may have some ReactJS project code written with babel version 6. You will need to upgrade them into version 7. Here in the session, I will introduce a working approach for upgrade, in case of some errors like the following:

Babel 7

In version 7, the most important change is scoped packages, where the folder names in the monorepo are not changed. You just simply change the name in its package.json .

Your dependencies will need to be modified like so:

Examples:
babel-register => @babel/register
babel-core => @babel/core.

if you are using babel 7, then you have to install all dependencies with the naming convention shown above. babel-eslint would be @babel/eslint, same applies to babel-jest, etc.

when referencing the packages, reference them as they are too.
e.g is shown in this babelrc below

{
    "presets": ["@babel/preset-env"]
}


There are also some other change, please refer to this link.

Tooling

Actually there is an easy tool “babel-upgrade” for upgrade. You could run babel-upgrade without installing it locally:

npx babel-upgrade --write

Or you can install globally and run

npm install babel-upgrade
babel-upgrade --write

How it works:

“babel-upgrade” will compare the changes between before and after the Upgrade.  By add the option “–write”, it will apply the changes accordingly.