Cannot find module '@babel/core'

Question

I am following along with this webpack4/react tutorial:

https://www.youtube.com/watch?v=deyxI-6C2u4

I have followed it exactly up until the part where he runs npm start. The difference is, his app runs, and mine gets the error:

Cannot find module '@babel/core'

The full error:

ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core'     at Function.Module._resolveFilename (module.js:547:15)     at Function.Module._load (module.js:474:25)     at Module.require (module.js:596:17)     at require (internal/module.js:11:18)     at Object.<anonymous> (C:\Users\joeyf\Desktop\Code\Github\webpack4-sample\node_modules\babel-loader\lib\index.js:5:15)     at Module._compile (module.js:652:30)     at Object.Module._extensions..js (module.js:663:10)     at Module.load (module.js:565:32)     at tryModuleLoad (module.js:505:12)     at Function.Module._load (module.js:497:3)  @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js main[2] 

I have tried to reinstall babel-core but is still not being found. Here is my package.json:

{   "name": "webpack4-sample",   "version": "1.0.0",   "description": "A sample setup of Webpack4 with React and Babel",   "main": "index.js",   "scripts": {     "start": "webpack-dev-server --mode development --open --hot",     "build": "webpack --mode production"   },   "author": "Joey Fenny",   "license": "ISC",   "dependencies": {     "babel": "^6.23.0",     "babel-cli": "^6.26.0",     "react": "^16.4.2",     "react-dom": "^16.4.2"   },   "devDependencies": {     "babel-core": "^7.0.0-rc.4",     "babel-loader": "^8.0.0",     "babel-preset-env": "^1.7.0",     "babel-preset-react": "^6.24.1",     "html-webpack-plugin": "^3.2.0",     "webpack": "^4.17.1",     "webpack-cli": "^3.1.0",     "webpack-dev-server": "^3.1.6"   } } 

My webpack.config.js:

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');  module.exports = {     entry: './src/index.js',     output: {         path: path.join(__dirname, '/dist'),         filename: 'index_bundle.js'     },     module: {         rules: [{             test: /\.js$/,             exclude: path.join(__dirname, '/node_modules'),             use: {                 loader: 'babel-loader'             }         }]     },     plugins: [         new HtmlWebpackPlugin({             template: './src/index.html'         })     ] } 

Here is a link to a git repo:

https://gitlab.com/jfny/webpack4-sample

Anyone know whats going on? Thanks.

Answer 1

Try running this.

npm install @babel/core --save 

babel changed their package so your babel-core will not be the same as @babel/core.

Answer 2

The recent Babel upgrade to version 7 changed the namings of the node packages.

For instance, now you have to install

npm install --save-dev @babel/core @babel/preset-env 

and

npm install --save-dev @babel/preset-react 

to get it working with React. Then you can use these in your .babelrc file:

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

Or as alternative, when not having a .babelrc, in your package.json:

... "keywords": [], "author": "", "license": "ISC", "babel": {   "presets": [     "@babel/preset-env",     "@babel/preset-react"   ] }, "devDependencies": { ... 

If you want to get more into it, you can checkout this recent Webpack + Babel + React setup.