Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to upgrade to babel 7

Tags:

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.

like image 313
Hemadri Dasari Avatar asked Sep 04 '18 02:09

Hemadri Dasari


People also ask

What is the latest version of Babel?

Babel 7.19 is released!

Which of the following feature is disabled by default in the latest version of Babel 7.0 to improve the performance?

Tokens removed. In previous versions tokens were always attached to the AST on the top-level. In the latest version of @babel/parser we removed this behavior and made it disabled by default to improve the performance of the parser.

How do I find my Babel version?

You can also check the version of babel-cli by finding the babel-cli folder in node_modules and looking at the version property of the package. json that is at the base of that folder. If babel-cli was installed globally via -g flag of npm install , you could check the version by executing command babel --version .


2 Answers

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" } 
like image 73
Priyesh Diukar Avatar answered Oct 05 '22 02:10

Priyesh Diukar


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.

like image 40
illiteratewriter Avatar answered Oct 05 '22 03:10

illiteratewriter