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.

image

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 49 (6 by maintainers)

Most upvoted comments

The issue might be because babel-loader@8 depends on babel@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

  • “babel-core”: “^6.26.0”
  • “babel-loader”: “^7.1.4”
  • “babel-preset-env”: “^1.6.1”
{
  "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.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  }
}

Yup @nicolo-ribaudo

Everythiing is fine now with: npm install -D babel-loader @babel/core @babel/preset-env

.babelrc

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

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

npm install babel-loader@7 babel-core

but if you’re starting a new project, Babel 7 makes much more sense, so you would ideally do

npm install babel-loader @babel/core

May be it is late to comment, but I needed the below 2 things to solve the problem:

  • install @babel/preset-react
  • add @babel/react in .babelrc presets

The babel libraries in package.json

"@babel/core": "^7.1.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2"

The .babelrc presets

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

I think half the issue is your docs for webpack install say:

Incorrect Docs

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 all babel* from my package.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:

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

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

yarn add -D babel-loader @babel/core @babel/preset-react @babel/preset-env @babel/helper-call-delegate```

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 ] }

The .babelrc presets

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

This was my problem. I changed the names of the presets in .babelrc and was set. Thanks!

@Palaklive .babelrc

{
    "presets": [
        "babel-preset-env"
    ]
}

NPM Command Line: npm install --save-dev babel-loader@7 babel-core babel-preset-env webpack webpack-cli -D

this command will resolve your problem must use @7 after babel-loader like babel-loader@7 instead of latest babel-loader@8 by default

I stopped having issues when I removed “es2015” preset from .babelrc.

npm install -D babel-loader @babel/core @babel/preset-env

Yup @nicolo-ribaudo

Everythiing is fine now with: npm install -D babel-loader @babel/core @babel/preset-env

.babelrc

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

It really worked ,Thank you !!

In the original report you were using babel-loader 8 and Babel 6 which, yes, aren’t compatible. With babel-loader 8 and Babel 7 you should be fine.

npm install -D babel-loader @babel/core @babel/preset-env webpack thanks 👍

It’ll work fine if downgrade the version

  • “babel-core”: “^6.26.0”
  • “babel-loader”: “^7.1.4”
  • “babel-preset-env”: “^1.6.1”
{
  "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.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  }
}

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

7.1.5

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