babel: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Edits by @JLHwung
If you hit this issue via search engines, please refer to https://github.com/babel/babel/issues/8599#issuecomment-417880788.
Bug Report
Current Behavior Recently I’m trying to setup babel with webpack. and I’m getting an error.
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-4-tutorial@1.0.0 build: `webpack --mode production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-4-tutorial@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Mentos\AppData\Roaming\npm-cache\_logs\2018-09-01T10_50_57_222Z-debug.log
package.json
{
"name": "webpack-4-tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.0",
"babel-preset-env": "^1.7.0",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
}
}
package.json
// webpack v4
const path = require('path');
module.exports = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
Expected behavior/code Babel Configuration (.babelrc, package.json, cli command)
{
"presets": [
"env"
]
}
debug.log
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using npm@6.2.0
3 info using node@v10.9.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle webpack-4-tutorial@1.0.0~prebuild: webpack-4-tutorial@1.0.0
6 info lifecycle webpack-4-tutorial@1.0.0~build: webpack-4-tutorial@1.0.0
7 verbose lifecycle webpack-4-tutorial@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle webpack-4-tutorial@1.0.0~build: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\Playground\webpack-4-tutorial\node_modules\.bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files (x86)\AMD\ATI.ACE\Core-Static;C:\Program Files\Git\cmd;C:\Program Files\TortoiseGit\bin;C:\Program Files\Microsoft VS Code\bin;C:\Program Files\nodejs\;C:\Users\Mentos\AppData\Local\Microsoft\WindowsApps;;C:\Program Files\Microsoft VS Code\bin;C:\Users\Mentos\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Mentos\AppData\Roaming\npm
9 verbose lifecycle webpack-4-tutorial@1.0.0~build: CWD: D:\Playground\webpack-4-tutorial
10 silly lifecycle webpack-4-tutorial@1.0.0~build: Args: [ '/d /s /c', 'webpack --mode production' ]
11 silly lifecycle webpack-4-tutorial@1.0.0~build: Returned: code: 2 signal: null
12 info lifecycle webpack-4-tutorial@1.0.0~build: Failed to exec build script
13 verbose stack Error: webpack-4-tutorial@1.0.0 build: `webpack --mode production`
13 verbose stack Exit status 2
13 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:304:16)
13 verbose stack at EventEmitter.emit (events.js:182:13)
13 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:182:13)
13 verbose stack at maybeClose (internal/child_process.js:961:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:250:5)
14 verbose pkgid webpack-4-tutorial@1.0.0
15 verbose cwd D:\Playground\webpack-4-tutorial
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v10.9.0
19 verbose npm v6.2.0
20 error code ELIFECYCLE
21 error errno 2
22 error webpack-4-tutorial@1.0.0 build: `webpack --mode production`
22 error Exit status 2
23 error Failed at the webpack-4-tutorial@1.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]
Environment
- Babel version(s): 6.26.3
- Node/npm version: Node 10.9.0/npm 6.2]
- OS: Windows 10
- How you are using Babel:loader
Possible Solution
Additional context/Screenshots I follow the same step in past and it was work fine.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 49 (6 by maintainers)
The issue might be because
babel-loader@8
depends onbabel@7
? If you want to use babel-loader@8, try upgrading babel to v7.npm install -D babel-loader @babel/core @babel/preset-env webpack
It’ll work fine if downgrade the version
Yup @nicolo-ribaudo
Everythiing is fine now with:
npm install -D babel-loader @babel/core @babel/preset-env
.babelrc
Indeed, @RedHope is correct. This is tripping up a lot of people so I’ve filed #668 to try to improve the error message.
If you wish to install Babel 6.x, you can do
but if you’re starting a new project, Babel 7 makes much more sense, so you would ideally do
May be it is late to comment, but I needed the below 2 things to solve the problem:
@babel/preset-react
@babel/react
in.babelrc
presetsThe babel libraries in package.json
The
.babelrc
presetsI think half the issue is your docs for webpack install say:
If you do that in a new project, it installs incompatible versions & you get this error.
I resolved it (to work with ES2015 loader) by clearing everything out: deleting my
node_modules
folder, clearing allbabel*
from mypackage.json
. Then started again with what the docs should probably say:npm install -D @babel/core @babel/preset-env babel-loader
and then updating
.babelrc
to:Hey @Palaklive! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we’re a limited number of volunteers, so it’s possible this won’t be addressed swiftly.
If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.
That solved the problem for me
We have renamed the Babel packages: they aren’t
babel-foo
anymore but@babel/foo
. e.g."@babel/core": "^7.0.0"
,"@babel/preset-env": "^7.0.0"
. You can read https://babeljs.io/docs/en/v7-migration for more info.I was with the same issue and it works fine after I put the same name of the dependencies at the .babelrc.
“devDependencies”: { “@babel/core”: “^7.1.2”, “@babel/preset-env”: “^7.1.0”, “@babel/preset-react”: “^7.0.0”, “babel-loader”: “^8.0.4”, “webpack”: “^4.20.2”, “webpack-cli”: “^3.1.2”, “webpack-dev-server”: “^3.1.9” }
{ “presets”: [ “@babel/preset-env”, “@babel/preset-react” ] }
This was my problem. I changed the names of the presets in
.babelrc
and was set. Thanks!@Palaklive .babelrc
NPM Command Line:
npm install --save-dev babel-loader@7 babel-core babel-preset-env webpack webpack-cli -D
I stopped having issues when I removed “es2015” preset from .babelrc.
It really worked ,Thank you !!
In the original report you were using
babel-loader
8 and Babel 6 which, yes, aren’t compatible. Withbabel-loader
8 and Babel 7 you should be fine.npm install -D babel-loader @babel/core @babel/preset-env webpack
thanks 👍@anuragrksharma THANK YOU!
I am facing the same problem and my babel is already updated but still show the same error- Error: Child compilation failed: Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: [BABEL] /Users/apple/Documents/project/router-app/node_modules/webpack/buildin/global.js: Cannot find module ‘./src/data’ please help
this is what is did: delete node_modules npm install @babel/core --save-dev npm install @babel/preset-env --save-dev npm install babel-core --save-dev npm install babel-jest --save-dev npm install babel-loader --save-dev to ^7.0.0-0.
then npm install
solved my problem
it work for me, thank you
solve
{ "name": "webpack-4-tutorial", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.2.2", "babel-loader": "^8.0.0", "@babel/preset-env": "^7.2.3", "@babel/preset-react": "^7.0.0", "webpack": "^4.17.1", "webpack-cli": "^3.1.0" } }
preset
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ] }
hope it will fine