Module build failed (from ./node_modules/babel-loader/lib/index.js):

[palak-temp]

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.

[babel-bot]

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.

[palak-temp]

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

[anuragrksharma]

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

[loganfsmyth]

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

[palak-temp]

Yes, @loganfsmyth

I want to start a new project. But, When try to run... npm install -D babel-loader @babel/core @babel/preset-env OR npm install -D babel-loader@latest @babel/core@latest @babel/preset-env@latest

I'll Install...

"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.1",

Which are not compatible with each other. In this case, what should I do?

[loganfsmyth]

What makes you say they aren't compatible? Those should work well together.

[palak-temp]

https://github.com/babel/babel/issues/8599#issue-356194372

[nicolo-ribaudo]

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.

[palak-temp]

Still same issue

"babel-core": "^7.0.0-beta.3",
"babel-loader": "^8.0.1",
"babel-preset-env": "^1.7.0",

[nicolo-ribaudo]

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.

[palak-temp]

Yup @nicolo-ribaudo

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

.babelrc

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

[sabuj-das]

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

[brentkelly]

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

[xakplant]

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "This is demo project",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "devserver": "webpack-dev-server --debug --hot --devtool eval-source-map --output-pathinfo --watch --colors --inline --content-base public --port 8090 --host 172.31.255.177"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "jquery": "*"
  },
  "devDependencies": {
    "autoprefixer-loader": "*",
    "babel": "5.x",
    "babel-loader": "5.*",
    "css-loader": "^0.22.0",
    "file-loader": "^0.8.5",
    "json-loader": "^0.5.4",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.12",
    "webpack-dev-server": "^1.14.1"
  }
}

var webpack = require('webpack');

module.exports = {
    entry: "./src/main.js",
    output: {
        path: __dirname + '/public/build/',
        publicPath: "build/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: "babel",
                exclude: [/node_modules/, /public/]
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader!autoprefixer-loader",
                exclude: [/node_modules/, /public/]
            },
            {
                test: /\.gif$/,
                loader: "url-loader?limit=10000&mimetype=image/gif"
            },
            {
                test: /\.jpg$/,
                loader: "url-loader?limit=10000&mimetype=image/jpg"
            },
            {
                test: /\.png$/,
                loader: "url-loader?limit=10000&mimetype=image/png"
            },
            {
                test: /\.svg/,
                loader: "url-loader?limit=26000&mimetype=image/svg+xml"
            },
            {
                test: /\.jsx$/,
                loader: "react-hot!babel",
                exclude: [/node_modules/, /public/]
            },
            {
                test: /\.json$/,
                loader: "json-loader"
            }
        ]
    }
}

[thandrade88]

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

[dmantena-nisum-com]

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 !!

[natotthomer]

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!

[AshifTheKing]

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

[fakefarm]

I'm on a new project and I started from the babel-loader readme with the following.

webpack 4.x | babel-loader 8.x | babel 7.x

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

Yet, I was getting the similar error as everyone else. I noticed @thandrade88 mention v 8.0.4

However, looking at my new package.json I noticed that babel-loader was coming in still at "babel-loader": "^7.1.5", So I manually updated package.json to "babel-loader": "^8.0.4", and it worked for me.

  "devDependencies": {
        "@babel/core": "^7.2.2",
        "@babel/preset-env": "^7.3.1",
        "babel-loader": "^7.1.5",
        "webpack": "^4.29.0",
        "webpack-cli": "^3.2.1",
        "webpack-dev-server": "^3.1.14"
    }

[saulwolfdev]

ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' 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'. at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15) at Function.Module._load (internal/modules/cjs/loader.js:529:25) at Module.require (internal/modules/cjs/loader.js:657:17) at require (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at Object. (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\babel-loader\lib\index.js:10:11) at Module._compile (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\v8-compile-cache\v8-compile-cache.js:178:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10) at Module.load (internal/modules/cjs/loader.js:620:32) at tryModuleLoad (internal/modules/cjs/loader.js:560:12) at Function.Module._load (internal/modules/cjs/loader.js:552:3) at Module.require (internal/modules/cjs/loader.js:657:17) at require (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at loadLoader (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\loader-runner\lib\loadLoader.js:18:17) at iteratePitchingLoaders (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\loader-runner\lib\LoaderRunner.js:169:2) at runLoaders (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\loader-runner\lib\LoaderRunner.js:365:2) at NormalModule.doBuild (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\NormalModule.js:280:3) at NormalModule.build (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\NormalModule.js:427:15) at Compilation.buildModule (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\Compilation.js:635:10) at moduleFactory.create (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\Compilation.js:1021:12) at factory (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\NormalModuleFactory.js:405:6) at hooks.afterResolve.callAsync (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\NormalModuleFactory.js:155:13) at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\tapable\lib\HookCodeFactory.js:32:10), :6:1) at AsyncSeriesWaterfallHook.lazyCompileHook (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\tapable\lib\Hook.js:154:20) at resolver (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\NormalModuleFactory.js:138:29) at process.nextTick (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\NormalModuleFactory.js:342:9) at process.internalTickCallback (internal/process/next_tick.js:70:11)

este error me dio al intentar instalar webpack con babel luego pude solucionarlo con los pasos que me pasaron arriba WEBPACK npm install webpack webpack-cli -g mkdir webpack-starter-kit npm init BABEL npm install webpack webpack-cli -D npm install --save-dev @babel/preset-env npm install -D babel-loader@latest @babel/core@latest @babel/preset-env@latest

[sourabgupta88]

ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' 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'. at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15) at Function.Module._load (internal/modules/cjs/loader.js:529:25) at Module.require (internal/modules/cjs/loader.js:657:17) at require (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at Object. (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\babel-loader\lib\index.js:10:11) at Module._compile (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\v8-compile-cache\v8-compile-cache.js:178:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10) at Module.load (internal/modules/cjs/loader.js:620:32) at tryModuleLoad (internal/modules/cjs/loader.js:560:12) at Function.Module._load (internal/modules/cjs/loader.js:552:3) at Module.require (internal/modules/cjs/loader.js:657:17) at require (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at loadLoader (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\loader-runner\lib\loadLoader.js:18:17) at iteratePitchingLoaders (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\loader-runner\lib\LoaderRunner.js:169:2) at runLoaders (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\loader-runner\lib\LoaderRunner.js:365:2) at NormalModule.doBuild (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\NormalModule.js:280:3) at NormalModule.build (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\NormalModule.js:427:15) at Compilation.buildModule (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\Compilation.js:635:10) at moduleFactory.create (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\Compilation.js:1021:12) at factory (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\NormalModuleFactory.js:405:6) at hooks.afterResolve.callAsync (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\NormalModuleFactory.js:155:13) at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\tapable\lib\HookCodeFactory.js:32:10), :6:1) at AsyncSeriesWaterfallHook.lazyCompileHook (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\tapable\lib\Hook.js:154:20) at resolver (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\NormalModuleFactory.js:138:29) at process.nextTick (C:\entradauno\entrada-uno-srl\webpack-starter-kit\node_modules\webpack\lib\NormalModuleFactory.js:342:9) at process.internalTickCallback (internal/process/next_tick.js:70:11)

este error me dio al intentar instalar webpack con babel luego pude solucionarlo con los pasos que me pasaron arriba WEBPACK npm install webpack webpack-cli -g mkdir webpack-starter-kit npm init BABEL npm install webpack webpack-cli -D npm install --save-dev @babel/preset-env npm install -D babel-loader@latest @babel/core@latest @babel/preset-env@latest

In your node modules core module is not available . So use this first npm install @babel/core

If problems still continued, post your webpack-config.js,package.json and .babelrc files.

[sharadkapilsharma]

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

Hi i tried your suggestion, but still face same issue:

[./src/index.js] 1.34 KiB {main} [built] [failed] [1 error]

• 11 hidden modules

ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only functions. In /home/sharadsharma/RND/react-setup/node_modules/babel-preset-react/lib/index.js at createDescriptor (/home/sharadsharma/RND/react-setup/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)

[nicolo-ribaudo]

What's your config?

[evignacio]

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

this work for me thanks @anuragrksharma

[soscler]

I finally found the solution here https://medium.com/@binyamin/creating-a-node-express-webpack-app-with-dev-and-prod-builds-a4962ce51334

node: {
    // Need this when working with express, otherwise the build fails
    __dirname: false,   // if you don't put this is, __dirname
    __filename: false,  // and __filename return blank or /
  },
  externals: [nodeExternals()], // Need this to avoid error when working with Express

[davidjohn-dj]

I still have the same issue:

My babelrc is as follows: { "presets": [ "@babel/preset-env", "@babel/preset-react", "@babel/preset-stage-0" ], "env": { "development": { "presets": [ "module:react-hot-loader" ] } }, "plugins": [ "syntax-dynamic-import", "@babel/plugin-transform-runtime", "@babel/plugin-syntax-dynamic-import", "@babel/plugin-syntax-import-meta", [ "@babel/plugin-proposal-decorators", { "legacy": true } ], [ "@babel/plugin-proposal-class-properties", { "loose": true } ], "@babel/plugin-proposal-json-strings", [ "import", { "libraryName": "antd", "style": true } ], "@babel/plugin-proposal-function-sent", "@babel/plugin-proposal-export-namespace-from", "@babel/plugin-proposal-numeric-separator", "@babel/plugin-proposal-throw-expressions", "babel-plugin-styled-components" ], "ignore": [ "data/*.js", "node_modules/*" ], "compact": true }

My webpack.config.js is as follows:

`const path = require('path'); const webpack = require('webpack'); const Dotenv = require('dotenv-webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); const ProgressBarPlugin = require('progress-bar-webpack-plugin'); const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

const APP_DIR = path.resolve(__dirname, './src'); const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor'); const isProduction = process.env.NODE_ENV === 'production';

const config = { mode: 'development',

target: 'web',

context: path.join(__dirname, './src'),

entry: { app: [ "core-js/stable", "regenerator-runtime/runtime", "react-hot-loader/patch", "./index.js" ] },

output: { path: path.join(__dirname, 'build'), filename: '[name].[hash].min.js', publicPath: '/', sourceMapFilename: '[name].[hash].js.map', chunkFilename: '[id].[hash].min.js', },

devtool: 'cheap-module-eval-source-map',

plugins: [ new ProgressBarPlugin(), new HtmlWebpackPlugin({ title: 'Indegene VEM - Administration', template: './../public/index.html', filename: './index.html', manifest: './../public/manifest.json', favicon: './../public/favicon.ico', inject: true, minify: { removeComments: true, collapseWhitespace: true }, }), new webpack.HotModuleReplacementPlugin(), new Dotenv(), new webpack.NoEmitOnErrorsPlugin(), new webpack.optimize.OccurrenceOrderPlugin(true), new MiniCssExtractPlugin('[name].css'), new MonacoWebpackPlugin(), require('autoprefixer'), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') }, }), ],

module: { rules: [ { test: /.css$/, include: MONACO_DIR, use: ['style-loader', 'css-loader'], }, { test: /.css$/, include: APP_DIR, use: [ MiniCssExtractPlugin.loader, "style-loader", "css-loader" ] }, { test: /.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', 'postcss-loader' ] }, { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ "@babel/preset-env", "@babel/preset-react" ] } } }, { test: /.ts$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ '@babel/typescript', '@babel/preset-env' ] } } }, { test: /.(png|jpg|jpeg|gif|svg)$/, use: [ { loader: 'file-loader', options: { name: '[name].[hash:8].[ext]', outputPath: 'assets/images/' } } ] }, { test: /.(woff|woff2|eot|ttf|svg)(\?v=[a-z0-9=.]+)?$/i, loader: 'url-loader?limit=100000&name=assets/fonts/[name].[hash:8].[ext]' } ], },

optimization: { minimizer: [ new UglifyJsPlugin(), new OptimizeCSSAssetsPlugin() ] },

resolve: { extensions: ['.js', '.jsx', '.ts'], }, }

module.exports = config;`

Please help me if someone found a solution to this. I tried all the methods as mentioned above including deletion of complete nodemodules. But it resulted in no luck.

[TCarmine]

Unfortunately even after have unistalled older babel version package and installed the one for babel 7, even manuall, I tried even deleting node_module but still getting :

ERROR in ./index.js Module build failed (from /home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-env' from '/home/ca/Desktop/code/LearnReact'

• Did you mean "@babel/env"? at Function.module.exports [as sync] (/home/ca/Desktop/code/LearnReact/node_modules/resolve/lib/sync.js:71:15) at resolveStandardizedName (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/files/plugins.js:101:31) at resolvePreset (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/files/plugins.js:58:10) at loadPreset (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/files/plugins.js:77:20) at createDescriptor (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-descriptors.js:154:9) at items.map (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-descriptors.js:109:50) at Array.map () at createDescriptors (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-descriptors.js:109:29) at createPresetDescriptors (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-descriptors.js:101:10) at passPerPreset (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-descriptors.js:58:96) at cachedFunction (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/caching.js:33:19) at presets.presets (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-descriptors.js:29:84) at mergeChainOpts (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-chain.js:320:26) at /home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-chain.js:283:7 at buildRootChain (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-chain.js:68:29) at loadPrivatePartialConfig (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/partial.js:85:55) at Object.loadPartialConfig (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/partial.js:110:18) at Object. (/home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:144:26) at Generator.next () at asyncGeneratorStep (/home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:3:103) at _next (/home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:5:194) at /home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:5:364 at new Promise () at Object. (/home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:5:97) at Object._loader (/home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:224:18) at Object.loader (/home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:60:18) at Object. (/home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:55:12)

This is my package.json:

{ "name": "reactprojects", "version": "1.0.0", "main": "./src/app/index.js", "repository": "git@github.com:TCarmine/LearnReact.git", "author": "Carmine", "license": "MIT", "private": true, "scripts": { "start": "webpack --config webpack.config.js --history-api-fallback --inline --progress", "build": "webpack --config webpack.config.js" }, "devDependencies": { "@babel/core": "^7.5.5", "@babel/plugin-proposal-class-properties": "^7.5.5", "@babel/plugin-transform-runtime": "^7.5.5", "@babel/preset-env": "^7.5.5", "@babel/preset-es2015": "^7.0.0-beta.53", "@babel/preset-react": "^7.0.0", "@babel/register": "^7.5.5", "babel-loader": "^8.0.6", "html-webpack-plugin": "^3.2.0", "webpack": "^4.36.1", "webpack-cli": "^3.3.6" }, "dependencies": { "@babel/polyfill": "^7.4.4", "react": "^16.8.6", "react-dom": "^16.8.6" } }

my .babelrc:

{ "presets": [ "@babel/preset-react", "@babel/preset-env", "@babel/react", "@babel/env" ], "env": { "development": { "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/transform-react-jsx-source" ] } } }

I out of idea as I know what is the issue, conflict betweekn Babel 7 an previous but all solution I found around aren't working

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

[ben-xD]

I stopped having issues when I removed "es2015" preset from .babelrc.

[kimamo]

@saulwolfdev fix worked for me!

[joaorsfonseca]

Hi.. I'm also running into this issue.. I've trying every single tip on this topic...

package.json

{
  "name": "old-donkey",
  "private": true,
  "version": "0.0.1",
  "description": "Old Donkey Template",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^8.4.1",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-plugin-root-import": "5.1.0",
    "babel-plugin-transform-object-assign": "6.22.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
    "babel-polyfill": "6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-3": "6.24.1",
    "copyfiles": "^2.0.0",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-react": "^7.7.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "immutability-helper": "^2.7.0",
    "node-sass": "^4.9.0",
    "path": "0.12.7",
    "postcss-loader": "^2.1.5",
    "react-hot-loader": "^3.1.3",
    "redbox-react": "^1.6.0",
    "redux-devtools": "3.4.1",
    "redux-devtools-dock-monitor": "1.1.3",
    "redux-devtools-log-monitor": "1.4.0",
    "redux-logger": "3.0.6",
    "redux-persist": "^4.10.1",
    "redux-slider-monitor": "2.0.0-1",
    "rimraf": "2.6.2",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.26.1",
    "webpack-bundle-analyzer": "^2.11.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10",
    "webpack-md5-hash": "0.0.6"
  },
  "dependencies": {
    "@babel/preset-env": "^7.6.0",
    "axios": "^0.18.0",
    "babel-loader": "^7.1.5",
    "bootstrap": "4.0.0-alpha.6",
    "brace": "^0.11.1",
    "classnames": "2.2.5",
    "font-awesome": "4.7.0",
    "immutable": "4.0.0-rc.4",
    "jquery": "^3.3.1",
    "lodash": "^4.17.10",
    "memoization": "1.0.2",
    "moment": "^2.22.1",
    "moment-timezone": "^0.5.16",
    "prop-types": "^15.6.1",
    "qs": "^6.5.2",
    "react": "^16.3.2",
    "react-ace": "^6.1.0",
    "react-addons-shallow-compare": "15.6.2",
    "react-big-calendar": "^0.19.1",
    "react-dimensions": "1.3.1",
    "react-dom": "^16.3.2",
    "react-dropzone": "^4.2.9",
    "react-fontawesome": "1.6.1",
    "react-input-slider": "4.0.1",
    "react-json-tree": "^0.11.0",
    "react-modal": "^3.4.4",
    "react-moment": "^0.7.0",
    "react-quill": "^1.2.7",
    "react-redux": "^5.0.7",
    "react-router": "3.0.5",
    "react-router-redux": "4.0.8",
    "react-select": "^1.2.1",
    "react-toggle": "4.0.2",
    "react-virtualized-select": "^3.1.3",
    "recharts": "^1.0.0-beta.10",
    "redux": "^3.7.2",
    "redux-persist-crosstab": "^3.7.0",
    "redux-thunk": "2.2.0",
    "tether": "^1.4.4"
  },
  "scripts": {
    "init": "npm install && npm i -g eslint && npm i -g eslint-plugin-react && npm i -g npm-check-updates",
    "release": "npm run prebuild && webpack --progress --colors -p --config webpack.config.production.js",
    "build": "webpack --progress --colors --config webpack.config.js",
    "clean": "rimraf dist/*",
    "lint": "eslint src",
    "prebuild": "npm run clean",
    "start": "webpack-dev-server"
  },
  "false": {}
}

.babelrc

{
  "presets": [ "es2015", "react", "stage-3","@babel/preset-env" ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-object-assign",
    ["transform-react-remove-prop-types", {
      "mode": "wrap",
      "ignoreFilenames": ["node_modules"]
    }],
    ["babel-plugin-root-import", {
      "rootPathSuffix": "src",
      "rootPathPrefix": "@"
    }, {
      "rootPathSuffix": "/",
      "rootPathPrefix": "~"
    }]
  ]
}

ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' (While processing preset: "C:\_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\preset-env\lib\index.js") at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15) at Function.Module._load (internal/modules/cjs/loader.js:506:25) at Module.require (internal/modules/cjs/loader.js:636:17) at require (internal/modules/cjs/helpers.js:20:18) at _core (C:_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\plugin-proposal-async-generator-functions\lib\for-await.js:9:16) at Object. (C:_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\plugin-proposal-async-generator-functions\lib\for-await.js:18:27) at Module._compile (internal/modules/cjs/loader.js:688:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10) at Module.load (internal/modules/cjs/loader.js:598:32) at tryModuleLoad (internal/modules/cjs/loader.js:537:12) @ multi babel-polyfill react-hot-loader/patch ./src/index.js main[2]

Any additional tip?

[nicolo-ribaudo]

You are mixing Babel 6 (babel-* packages) with Babel 7 (@babel/*). You should choose either one or the other (I suggest Babel 7)

[joaorsfonseca]

@nicolo-ribaudo thanks for the tip.. I've uninstalled all the babel packages and install the new ones using this command:

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

And now the error is slightly different. ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: .plugins[3][2] must be a string, or undefined at assertPluginItem (C:_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\validation\option-assertions.js:252:15) at arr.forEach (C:_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\validation\option-assertions.js:222:30) at Array.forEach () at assertPluginList (C:_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\validation\option-assertions.js:222:9) at Object.keys.forEach.key (C:_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\validation\options.js:107:5) at Array.forEach () at validateNested (C:_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\validation\options.js:83:21) at validate (C:_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\validation\options.js:74:10) at file (C:_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\config-chain.js:174:34) at cachedFunction (C:_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\@babel\core\lib\config\caching.js:33:19) @ multi react-hot-loader/patch ./src/index.js main[1] Child html-webpack-plugin for "index.html": Asset Size Chunks Chunk Names index.html 576 KiB 0 Entrypoint undefined = index.html [./node_modules/html-webpack-plugin/lib/loader.js!./src/assets/index.template.ejs] 445 bytes {0} [built] single entry C:_TFS\EP\ConnectorV2\Dev\Connector.UI\node_modules\html-webpack-plugin\lib\loader.js!C:_TFS\EP\ConnectorV2\Dev\Connector.UI\src\assets\index.template.ejs [./node_modules/lodash/lodash.js] 528 KiB {0} [built] cjs require !!../../node_modules/lodash/lodash.js [./node_modules/html-webpack-plugin/lib/loader.js!./src/assets/index.template.ejs] 1:8-56 [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built] cjs require global [./node_modules/lodash/lodash.js] 1:0-41 [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built] cjs require module [./node_modules/lodash/lodash.js] 1:0-41

My webbpack.config.js file:

"use strict";

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");

/**
 * Get configuration for Webpack
 *
 * @see http://webpack.github.io/docs/configuration
 *      https://github.com/petehunt/webpack-howto
 */
var port = process.env.webpackDevPort || 3000;
module.exports = {
  name: "browser",
  entry: [
    // activate HMR for React
    "react-hot-loader/patch",

    "./src/index.js"
  ],

  output: {
    // the output bundle
    filename: "js/[name].js",

    // path to the distribution folder
    path: path.resolve(__dirname, "dist"),

    // necessary for HMR to know where to load the hot update chunks
    publicPath: "/"
  },

  mode: "development",
  cache: true,
  devtool: "eval", //"source-map" - Disabled for performance

  stats: {
    errorDetails: true,
    colors: true,
    reasons: true
  },

  plugins: [
    // enable HMR globally
    new webpack.HotModuleReplacementPlugin(),

    // prints more readable module names in the browser console on HMR updates
    new webpack.NamedModulesPlugin(),

    // do not emit compiled assets that include errors
    new webpack.NoEmitOnErrorsPlugin(),

    // Provide all the global variables
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery",
      jquery: "jquery",
      Tether: "tether",
      "window.Tether": "tether"
    }),

    // Provide environment variable
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("dev")
      }
    }),

    // Build index.html
    new HtmlWebpackPlugin({
      title: "EP Service Center",
      favicon: "./src/assets/favicon.ico",
      template: "./src/assets/index.template.ejs",
      inject: "body"
    })
  ],

  resolve: {
    extensions: ["*", ".js", ".jsx", ".scss"],
    alias: {
      variables: path.resolve(
        __dirname,
        "src/components/containers/app/styles/_variables"
      ),
      mixins: path.resolve(
        __dirname,
        "src/components/containers/app/styles/_mixins"
      )
    }
  },

  devServer: {
    host: "localhost",
    port: port,
    historyApiFallback: true,
    // respond to 404s with index.html

    hot: true
    // enable HMR on the server
  },

  module: {
    rules: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader?sourceMap!postcss-loader?sourceMap"
      },
      {
        test: /\.less$/,
        loader:
          "style-loader!css-loader?sourceMap!postcss-loader?sourceMap!less-loader?sourceMap"
      },
      {
        test: /\.scss$/,
        loader:
          "style-loader!css-loader?sourceMap!postcss-loader?sourceMap!sass-loader?sourceMap"
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader:
          "url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]"
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader:
          "url-loader?limit=10000&mimetype=application/font-woff2&name=fonts/[name].[ext]"
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader:
          "url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]"
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader:
          "url-loader?limit=10000&mimetype=application/vnd.ms-fontobject&name=fonts/[name].[ext]"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader:
          "url-loader?limit=10000&mimetype=image/svg+xml&name=fonts/[name].[ext]"
      },
      {
        test: /\.(js|jsx)$/,
        // Skip any files outside of project's `src` directory
        include: [path.resolve(__dirname, "src")],
        loaders: ["react-hot-loader/webpack"]
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      },
      { test: /\.(jpg|png)$/, loader: "url-loader" }
    ]
  }
};

Thanks.

[mohammad-khosrojerdi]

7.1.5

it work for me, thank you

[khorramk]

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

[taherbth]

@khorramk, tried your solution but still having problem,

98% after emitting SizeLimitsPlugin

ERROR Failed to compile with 1 errors 1:14:00 PM

error in ./resources/assets/js/app.js

Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only functions. In /home/vagrant/code/mypos/node_modules/babel-preset-es2015/lib/index.js

[ghost]

@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

[premdaryanani01]

@ghost this worked for me thanks a lot

[Prakashandrews]

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

webpack.config

const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /.html$/, use: [ { loader: "html-loader" } ] } ] }, plugins: [ new HtmlWebPackPlugin({ template: "./src/index.html", filename: "./index.html" }) ] };

Issue with babel loader. can help to fix?

[ghost]

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

[Prakashandrews]

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

Thanks

[pranshudobhal]

index.js:1 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: C:\Users\prans\Desktop\Forkify\src\js\index.js: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\scope\index.js:822:13)
    at convertBlockScopedToVar (C:\Users\prans\Desktop\Forkify\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:139:13)
    at PluginPass.VariableDeclaration (C:\Users\prans\Desktop\Forkify\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:26:9)
    at newFn (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\visitors.js:179:21)
    at NodePath._call (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\path\context.js:55:20)
    at NodePath.call (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\path\context.js:42:17)
    at NodePath.visit (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\path\context.js:90:31)
    at TraversalContext.visitQueue (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\context.js:112:16)
    at TraversalContext.visitQueue (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\context.js:118:21)
    at TraversalContext.visitMultiple (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\context.js:79:17)
    at eval (webpack:///./src/js/index.js?:1:7)
    at Object../src/js/index.js (http://localhost:8080/js/bundle.js:4197:1)
    at __webpack_require__ (http://localhost:8080/js/bundle.js:20:30)
    at eval (webpack:///multi_(webpack)-dev-server/client?:3:18)
    at Object.0 (http://localhost:8080/js/bundle.js:4208:1)
    at __webpack_require__ (http://localhost:8080/js/bundle.js:20:30)
    at http://localhost:8080/js/bundle.js:84:18
    at http://localhost:8080/js/bundle.js:87:10

./src/js/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: C:\Users\prans\Desktop\Forkify\src\js\index.js: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\scope\index.js:822:13)
    at convertBlockScopedToVar (C:\Users\prans\Desktop\Forkify\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:139:13)
    at PluginPass.VariableDeclaration (C:\Users\prans\Desktop\Forkify\node_modules\babel-plugin-transform-es2015-block-scoping\lib\index.js:26:9)
    at newFn (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\visitors.js:179:21)
    at NodePath._call (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\path\context.js:55:20)
    at NodePath.call (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\path\context.js:42:17)
    at NodePath.visit (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\path\context.js:90:31)
    at TraversalContext.visitQueue (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\context.js:112:16)
    at TraversalContext.visitQueue (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\context.js:118:21)
    at TraversalContext.visitMultiple (C:\Users\prans\Desktop\Forkify\node_modules\@babel\traverse\lib\context.js:79:17)

I'm getting these errors. Can anyone help?

[ElkinCp5]

[mustafaabobakr]

That solved the problem for me

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

[Freivincampbell]

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

Thank you 😊 so much, this solution worked perfectly for me.

[redbastie]

@anuragrksharma THANK YOU!

[anamariagr]

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

[anshcena]

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

Thanks! worked for me

[elkinepayco]

Thanks!, Gracias

[informatika3052]

Unfortunately even after have unistalled older babel version package and installed the one for babel 7, even manuall, I tried even deleting node_module but still getting :

ERROR in ./index.js Module build failed (from /home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-env' from '/home/ca/Desktop/code/LearnReact'

* Did you mean "@babel/env"?
  at Function.module.exports [as sync] (/home/ca/Desktop/code/LearnReact/node_modules/resolve/lib/sync.js:71:15)
  at resolveStandardizedName (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
  at resolvePreset (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
  at loadPreset (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
  at createDescriptor (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
  at items.map (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
  at Array.map ()
  at createDescriptors (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
  at createPresetDescriptors (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
  at passPerPreset (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-descriptors.js:58:96)
  at cachedFunction (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/caching.js:33:19)
  at presets.presets (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-descriptors.js:29:84)
  at mergeChainOpts (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-chain.js:320:26)
  at /home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-chain.js:283:7
  at buildRootChain (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/config-chain.js:68:29)
  at loadPrivatePartialConfig (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/partial.js:85:55)
  at Object.loadPartialConfig (/home/ca/Desktop/code/LearnReact/node_modules/@babel/core/lib/config/partial.js:110:18)
  at Object. (/home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:144:26)
  at Generator.next ()
  at asyncGeneratorStep (/home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:3:103)
  at _next (/home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:5:194)
  at /home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:5:364
  at new Promise ()
  at Object. (/home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:5:97)
  at Object._loader (/home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:224:18)
  at Object.loader (/home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:60:18)
  at Object. (/home/ca/Desktop/code/LearnReact/node_modules/babel-loader/lib/index.js:55:12)

This is my package.json:

{ "name": "reactprojects", "version": "1.0.0", "main": "./src/app/index.js", "repository": "git@github.com:TCarmine/LearnReact.git", "author": "Carmine", "license": "MIT", "private": true, "scripts": { "start": "webpack --config webpack.config.js --history-api-fallback --inline --progress", "build": "webpack --config webpack.config.js" }, "devDependencies": { "@babel/core": "^7.5.5", "@babel/plugin-proposal-class-properties": "^7.5.5", "@babel/plugin-transform-runtime": "^7.5.5", "@babel/preset-env": "^7.5.5", "@babel/preset-es2015": "^7.0.0-beta.53", "@babel/preset-react": "^7.0.0", "@babel/register": "^7.5.5", "babel-loader": "^8.0.6", "html-webpack-plugin": "^3.2.0", "webpack": "^4.36.1", "webpack-cli": "^3.3.6" }, "dependencies": { "@babel/polyfill": "^7.4.4", "react": "^16.8.6", "react-dom": "^16.8.6" } }

my .babelrc:

{ "presets": [ "@babel/preset-react", "@babel/preset-env", "@babel/react", "@babel/env" ], "env": { "development": { "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/transform-react-jsx-source" ] } } }

I out of idea as I know what is the issue, conflict betweekn Babel 7 an previous but all solution I found around aren't working

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

is work for me npm install -D @babel/core @babel/preset-env babel-loader @babel/preset-react

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

thank you for all