How to upgrade to babel 7

babel-loader
babel-polyfill
requires babel ^7.0 0 0'', but was loaded with 6.26 3
babel-preset-env
install babel
babel version
babel-node
babel core-js

I tried to upgrade Webpack and babel to 4, 7 respectively but couldn’t make it work. Also the official doc isn’t helping much with the upgrade

I am getting following issue

compiler error: ERROR in Cannot find module '@babel/core' @ multi main

dependencies I am using:

"babel-core": "^6.26.3",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"webpack": "^4.15.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"

Please let me know if more details required.

Babel changed the name of the module babel-core to @babel/core. Just run npm install @babel/core. This will install the latest version of Babel core.

Most of the packages in Babel has been renamed to follow the pattern @babel/PACKAGE_NAME. So if you want to upgrade, change the package names to follow the pattern and run npm install.

To upgrade to Babel 7 you can use this migration guide.

Upgrade to Babel 7 · Babel, Upgrade to Babel 7. Refer users to this document when upgrading to Babel 7. Because not every breaking change will affect every project, we'  So if you want to upgrade, change the package names to follow the pattern and run npm install. To upgrade to Babel 7 you can use this migration guide.

Use babel-upgrade

Tested on node@10.15.3, npm@6.4.1 and babel@7.4.0

You can use following script. (npx on node 5+ only)

npx babel-upgrade --write

The --write flag writes the updates to your package.json and .babelrc.

You will end up with following modifications to package.json:

"devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-private-methods": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0"
}

.babelrc

{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    [
      "@babel/plugin-proposal-class-properties"
    ],
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-private-methods"
    ]
  ]
}

Out of the above plugins you need @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods to make private properties work correctly if you choose to implement them.

If you are using eslint, dont forget to set your parser as babel-eslint like so in your .eslintrc file:

{
    "parser": "babel-eslint"
}

babel/babel-upgrade: ⬆️ A tool for upgrading Babel , babel-upgrade. A tool that tries to automatically update most dependencies, config files, and JavaScript files that require Babel packages directly to Babel 7 (​and  Removed babel.analyse because it was just an alias for babel.transform. Removed path.mark() since we didn't use it and it can be implemented in your own plugin. Removed babel.metadata since the generated plugin metadata is always included in the output result. Removed path.hub.file.addImport. You can use the @babel/helper-module-imports module instead.

You can use babel-upgrade for smooth upgrading.

https://github.com/babel/babel-upgrade

You might need npm prune after that in order to discard outdated packages in node_modules.

EDIT:

When I tried babel-upgrade, babel and webpack config was not modified. so I had to change it manually. Here is the example.

.babelrc

"presets": ["@babel/env", "@babel/react"]

webpack config

loader: 'babel-loader',
options: { presets: ['@babel/env', '@babel/react']}

Fast way to upgrade to Babel 7 - Tony Pai, According to migration guide from babel, you could use babel-upgrade tool to resolve the issue of stage preset deprecation. If your .babelrc include  Personal Experiences at Babel #1 — A PR with Unusually High Number of Reviews; Babel and Summer of Code 2017; Upgrade to Babel 7 (moved) Upgrade to Babel 7 for Tool Authors (WIP) 6.23.0 Released; The State of Babel; 6.19.0 Released; 6.18.0 Released; 6.16.0 Released; Babili (babel-minify) 6.14.0 Released; Babel Doctor; Setting up Babel 6; 6.0.0 Released; React on ES6+ Function Bind Syntax

babel-upgrade, Get unlimited public & private packages + package-based permissions with npm Pro.Get started ». babel-upgrade. 1.0.1 • Public • Published a  After a long time, Babel 7 has been released. If you use Babel at all, it's important to do the following things to make sure you're good to go: Make sure that the project's package.json file points to the right version of Babel If you use yearly presets (ES2015 / ES2017) or the lates

Updating to Babel 7.4, 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  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

So What's New in Babel 7?, Babel is a transpiler for JavaScript to turn ES6 or ES7 into code that runs in the browsers. Learn about Babel 7's babel-upgrade, Overrides,  # npx lets you run babel-upgrade without installing it locally npx babel-upgrade --write # or install globally and run npm install babel-upgrade -g babel-upgrade --write Without the --write (or -w ) flag, babel-upgrade will print a diff without writing any changes.

Comments
  • could this be valid also for babel.config as since some version that is the name instead of .babelrc?
  • @CarmineTambascia. Things slightly changed since v7.x. Like the babel docs claim: All Babel API options are allowed depending on your use case mentioned in the configuration page.