How to fix "Module build failed (from ./node_modules/babel-loader/lib/index.js):"?
Solution 1
[email protected] uses Babel 7.x, which is @babel/core@^7.0.0, and more importantly in your case @babel/preset-env@7 replaces babel-preset-env@^1.7.0.
You'll need to make sure to do
npm install @babel/core @babel/preset-env
and update your Babel config to use @babel/preset-env instead of babel-preset-env with something like
"presets": [
"@babel/preset-env"
]
Note: For others coming across this, the issue may also be that you're using plugins/preset from Babel 6 on Babel 7. This may be hard to notice if you're using a third-party Babel preset since the versions of the presets may not match the version of Babel itself.
Solution 2
For NPM, run
npm install -D babel-loader @babel/core @babel/preset-env webpack
FOR YARN, run
yarn add --dev babel-loader @babel/core @babel/preset-env webpack
Solution 3
Late but might be helpful.
Downgrade the version of @babel-loader to version 7. It worked for me when i encountered same problem
Solution 4
If you noticed this after installing a package like web3.
Kill the server and try to rebuild hope it helps
Arjun Kashyap
Updated on February 12, 2022Comments
-
Arjun Kashyap about 2 years
So I have been trying to setup React Js environment. I am facing the babel dependencies error. I know this problem is very common and there are tons of answers available but none of them have worked for me so far. I have searched through the internet to solve it but it still shows the same error.
This is the error I am getting:
ERROR in ./main.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-es2015' from 'D:\my-app' at Function.module.exports [as sync] (D:\my-app\node_modules\resolve\lib\sync.js:58:15) at resolveStandardizedName (D:\my-app\node_modules\@babel\core\lib\config\files\plugins.js:101:31) at resolvePreset (D:\my-app\node_modules\@babel\core\lib\config\files\plugins.js:58:10) at loadPreset (D:\my-app\node_modules\@babel\core\lib\config\files\plugins.js:77:20) at createDescriptor (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:154:9) at items.map (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:109:50) at Array.map (<anonymous>) at createDescriptors (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:109:29) at createPresetDescriptors (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:101:10) at passPerPreset (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:58:96) Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = index.html [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 448 bytes {0} [built] [./node_modules/lodash/lodash.js] 527 KiB {0} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built] [./node_modules/webpac
This is my .babelrc
{ "presets": ["es2015"] }
webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './main.js', output: { path: path.join(__dirname, '/bundle'), filename: 'index_bundle.js' }, devServer: { inline: true, port: 8080 }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }, plugins:[ new HtmlWebpackPlugin({ template: './index.html' }) ] }
package.json
{ "name": "my-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --mode development --open --hot", "build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "babel-core": "^6.26.3", "babel-preset-env": "^1.7.0", "react": "^16.8.6", "react-dom": "^16.8.6", "webpack-cli": "^3.3.2", "webpack-dev-server": "^3.3.1" }, "devDependencies": { "@babel/core": "^7.4.4", "@babel/preset-env": "^7.4.4", "@babel/preset-es2015": "^7.0.0-beta.53", "babel-loader": "^8.0.6", "html-webpack-plugin": "^3.2.0", "webpack": "^4.31.0" } }
-
SilverSideDown over 3 yearsNot sure why this was downvoted, as the NPM version solved my error exactly. for "Failed to compile. Module not found: Can't resolve .../react-scripts/node_modules/babel-loader/lib/index.js'
-
CreateSean over 2 yearsthis worked for me too
-
dǝɥɔS ʇoıןןƎ over 2 years
npm i -D @babel/core @babel/preset-env