25

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"

What can I try next?

halfer
  • 19,824
  • 17
  • 99
  • 186
Hemadri Dasari
  • 32,666
  • 37
  • 119
  • 162

3 Answers3

45

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"
}
Priyesh Diukar
  • 2,032
  • 1
  • 15
  • 19
  • 2
    could this be valid also for babel.config as since some version that is the name instead of .babelrc? – Carmine Tambascia Jul 23 '19 at 13:20
  • @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](https://babeljs.io/docs/en/configuration) page. – Priyesh Diukar Jul 24 '19 at 08:47
  • 2
    this should be considered as an answer as well – Seif Tml Nov 09 '20 at 19:14
  • Depending on your setup, you might also need "npm install @babel/runtime-corejs2 --save" - especially if you get an error such as "Cannot find module '@babel/runtime-corejs2/helpers/interopRequireDefault'" The above worked for me with the addition of this step. – Richard Wheeldon Mar 18 '22 at 18:19
  • This library seems dead. – coler-j Oct 25 '22 at 16:57
22

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.

illiteratewriter
  • 4,155
  • 1
  • 23
  • 44
9

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']}
ohkts11
  • 2,581
  • 2
  • 21
  • 17