How to upgrade to babel 7

Question

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.

Answer 1

Use babel-upgrade

Tested on [email protected], [email protected] and [email protected]

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" } 

Answer 2

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.