Cannot find module '@babel/core'
node.jsReactjsNpmWebpackBabeljsnode.js Problem Overview
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.
node.js Solutions
Solution 1 - node.js
Try running this.
npm install @babel/core --save
babel changed their package so your babel-core
will not be the same as @babel/core
.
Solution 2 - node.js
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.
Solution 3 - node.js
I removed the existing
npm uninstall babel-core babel-preset-env babel-preset-react
and added their new names
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react
that's works for me as perfectly fine.
Solution 4 - node.js
for those of you who use @babel/core alongside babel-node:
i just installed @babel/core using npm i @babel/core --save-dev
but when i tried to use babel-node it does not recognized the @babel/core package, i uninstalled @babel/core and installed it again using npm i @babel/core --save
and it worked again!
Solution 5 - node.js
In my case I had to uninstall babel 6
npm uninstall --save-dev babel-cli babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-2 babel-register
and then reinstall babel 7
npm i --save-dev @babel/cli @babel/core @babel/node @babel/polyfill @babel/preset-env
and it worked for me.
Solution 6 - node.js
I am able to fix this issue using below command
npm install @babel/core --save
Solution 7 - node.js
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
Solution 8 - node.js
try to install npm install @babel/core --save if it does not work try to uninstall node_modules and reinstall
Solution 9 - node.js
I solved the same error by removing all the babel modules from dev Dependencies executing the below command:
npm install -D babel-loader @babel/core @babel/preset-env
You can refer to this link if the above command does not work:
[https://github.com/babel/babel/issues/8599#issuecomment-417866691]
Solution 10 - node.js
I fixed with:
npm install --save-dev babel-loader@7 babel-core babel-preset-env webpack webpack-cli -D
Solution 11 - node.js
Go in by running on Windows, %USERPROFILE%\.quokka
The ~/.quokka
configuration is limited to the config.json
file and any packages that exist in ~/quokka/node_modules
.
Put the following into config.js
,
{
"pro":true,
"babel": {
"presets": ["@babel/preset-env", " @babel/preset-react"],
"plugins": [
["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
}
Solution 12 - node.js
I've been dealing with this problem for a few hours and it mysteriously disappeared when I added a "devDependencies" section to my package.json file and moved the @types dependencies to it.
Solution 13 - node.js
if you have react application and you get error change your babel config to below:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": 3,
"modules": false
}
],
"@babel/preset-react"
],
"plugins": [
["@babel/transform-async-to-generator"],
["@babel/plugin-transform-runtime"],
["@babel/syntax-dynamic-import"],
["@babel/plugin-transform-classes", {
"loose": true
}],
[
"babel-plugin-transform-builtin-extend",
{
"globals": ["Error"]
}
]
]
}
Solution 14 - node.js
my two cents, for people getting started with react, webpack, babel, jsx,
I got a problem with
npm run build
ERROR in ./src/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-core'
When you tried to gradually install each component, you might run into a version conflict between packages, i.e., you might ended up with a package.json
file like this
"dependencies": {
"@babel/core": "^7.13.15",
"@babel/preset-env": "^7.13.15",
"@babel/preset-react": "^7.13.13",
"babel-loader": "^7.1.5",
"webpack": "^5.33.2",
"webpack-cli": "^4.6.0"
Clearly, the reported failed to load babel-loader
is not because I did not have babel-loader
installed. Therefore, I think, I would try to re-install it again with npm i babel-loader
.
And, I got this message
$ npm install babel-loader
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: indecision-app@1.0.0
npm ERR! Found: webpack@5.33.2
npm ERR! node_modules/webpack
npm ERR! webpack@"^5.33.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"2 || 3 || 4" from babel-loader@7.1.5
npm ERR! node_modules/babel-loader
npm ERR! babel-loader@"^7.1.5" from the root project
I noticed that I'm using Webpack v.5. Hence, I remove babel-loader
from package.json
file and do npm i babel-loader
again.
This time, npm run build
was successful!