Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
palak-temp opened this issue Sep 1, 2018 · 49 comments
Closed

Comments

@palak-temp
Copy link

palak-temp commented Sep 1, 2018

Edits by @JLHwung

If you hit this issue via search engines, please refer to #8599 (comment).


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

@babel-bot
Copy link
Collaborator

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
Copy link
Author

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

@ganura-web
Copy link

ganura-web commented Sep 1, 2018

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
Copy link
Member

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
Copy link
Author

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
Copy link
Member

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

@palak-temp
Copy link
Author

#8599 (comment)

@nicolo-ribaudo
Copy link
Member

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
Copy link
Author

Still same issue

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

image

@nicolo-ribaudo
Copy link
Member

nicolo-ribaudo commented Sep 2, 2018

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
Copy link
Author

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
Copy link

sabuj-das commented Sep 18, 2018

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
Copy link

brentkelly commented Sep 21, 2018

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

@xakplant
Copy link

xakplant commented Sep 25, 2018

{
  "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
Copy link

thandrade88 commented Oct 12, 2018

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
Copy link

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
Copy link

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
Copy link

AshifTheKing commented Jan 14, 2019

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link
Member

What's your config?

@evignacio
Copy link

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
Copy link

soscler commented May 7, 2019

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
Copy link

davidjohn-dj commented Jun 14, 2019

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
Copy link

TCarmine commented Jul 22, 2019

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:

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

@ben-xD
Copy link

ben-xD commented Aug 11, 2019

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

@Kimamo
Copy link

Kimamo commented Sep 8, 2019

@saulwolfdev fix worked for me!

@joaorsfonseca
Copy link

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
Copy link
Member

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

@joaorsfonseca
Copy link

joaorsfonseca commented Sep 10, 2019

@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
Copy link

7.1.5

it work for me, thank you

@khorramk
Copy link

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
Copy link

@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
Copy link

ghost commented Oct 21, 2019

@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
Copy link

@ghost this worked for me thanks a lot

@Prakashandrews
Copy link

Prakashandrews commented Dec 1, 2019

Screenshot 2019-12-01 at 5 44 11 PM

.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
Copy link

ghost commented Dec 4, 2019

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
Copy link

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
Copy link

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
Copy link

image

@mustafaabobakr
Copy link

That solved the problem for me

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

@Freivincampbell
Copy link

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
Copy link

@anuragrksharma THANK YOU!

@anamariagr
Copy link

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

@anshcena
Copy link

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

Thanks! worked for me

@elkinepayco
Copy link

Thanks!, Gracias

@informatika3052
Copy link

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

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

@babel babel locked as resolved and limited conversation to collaborators Jun 19, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests