Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react'

Asked
Active3 hr before
Viewed126 times

10 Answers

babelloadercannotmodulesmodulefailederrorbuildreact
90%

Meta Stack Overflow , Stack Overflow help chat ,Stack Overflow en español

Not

options: {
   presets: ['react']
}

but

options: {
   presets: ['@babel/preset-react']
}
load more v
88%

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"
]
load more v
72%

"babel-loader": "^7.1.4",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',In your node modules core module is not available . So use this first npm install @babel/core

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 - 01 T10_50_57_222Z - debug.log
load more v
65%

I configured babel + webpack + eslint in my existing project, after configuration I am getting an error at the time to run the npm run buildDev command from terminal, I'm struggling a lot to find the solutions of this weired error, please help, Sponsor Sponsor babel/babel-loader ,I don't know if it is the cause of the error message, but you are mixing Babel 6 packages with Babel 7 packages. You should update everything to v7.

load more v
75%

I'm stuck with the following error when trying to build a react app with Webpack4 and Babel7. ,Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react' ,I've tried removing the node_modules folder and reinstalling dependencies with the following.

Terminal

rm - rf node_modules /
   npm install

package.json

{
   "name": "reflask",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "start": "webpack-dev-server --open --mode development",
      "build": "webpack"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
      "@babel/core": "^7.1.0",
      "@babel/preset-env": "^7.1.0",
      "@babel/preset-react": "^7.0.0",
      "babel-loader": "^8.0.2",
      "html-loader": "^0.5.5",
      "html-webpack-plugin": "^3.2.0",
      "prop-types": "^15.6.2",
      "webpack": "^4.19.1",
      "webpack-cli": "^3.1.1",
      "webpack-dev-server": "^3.1.9"
   },
   "dependencies": {
      "bootstrap": "^4.1.3",
      "react": "^16.5.2",
      "react-bootstrap": "^0.32.4",
      "react-dom": "^16.5.2",
      "react-router-dom": "^4.3.1"
   }
}

webpack.config.js

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

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './js/components/App.jsx';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
<App />, document.getElementById('root'));
registerServiceWorker();

.babelrc

{
   "presets": ["@babel/preset-env", "@babel/preset-react"]
}
load more v
40%

and remove preset from babel-loader webpack cfg,And presets in package.json or .babelrc or babel.config ::,I've tried removing the node_modules folder and reinstalling dependencies with the following.

Terminal

rm - rf node_modules /
   npm install

package.json

{
   "name": "reflask",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "start": "webpack-dev-server --open --mode development",
      "build": "webpack"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
      "@babel/core": "^7.1.0",
      "@babel/preset-env": "^7.1.0",
      "@babel/preset-react": "^7.0.0",
      "babel-loader": "^8.0.2",
      "html-loader": "^0.5.5",
      "html-webpack-plugin": "^3.2.0",
      "prop-types": "^15.6.2",
      "webpack": "^4.19.1",
      "webpack-cli": "^3.1.1",
      "webpack-dev-server": "^3.1.9"
   },
   "dependencies": {
      "bootstrap": "^4.1.3",
      "react": "^16.5.2",
      "react-bootstrap": "^0.32.4",
      "react-dom": "^16.5.2",
      "react-router-dom": "^4.3.1"
   }
}

webpack.config.js

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

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './js/components/App.jsx';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
<App />, document.getElementById('root'));
registerServiceWorker();

.babelrc

{
   "presets": ["@babel/preset-env", "@babel/preset-react"]
}
load more v
22%

Ask questionsModule build failed (from ./node_modules/babel-loader/lib/index.js): ,How you are using Babel:loader,Current Behavior Recently I'm trying to setup babel with webpack. and I'm getting an error.

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 - 01 T10_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"
   ]
}
load more v
60%

and update your Babel config to use @babel/preset-env instead of babel-preset-env with something like,[email protected] uses Babel 7.x, which is @babel/[email protected]^7.0.0, and more importantly in your case @babel/[email protected] replaces [email protected]^1.7.0.,or using: npm install -D babel-loader @babel/core @babel/preset-env

You'll need to make sure to do

npm install @babel / core @babel / preset - env
load more v
48%

“babel-loader”: “^7.1.4”,How you are using Babel: loader,How you are using Babel:loader

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 - 01 T10_50_57_222Z - debug.log
{
   "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"
   }
}
// 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"
         }
      }]
   }
};
{
   "presets": [
      "env"
   ]
}
load more v
23%

Since a few days ago when I launch the service I see this error message,For those babel users who are affected by this issue after upgrading to node.js 13.13/12.17, please upgrade @babel/preset-env to 7.9.0.,Have you tried deleting /assets/node_modules and reinstalling? This is a JS issue, and while the solution might be as simple as installing the package the error messages states is missing, unless you’ve been doing something with the JS directly I think it would be best to reinstall.

I am using these versions:

$ node--version
v12 .18 .2

$ elixir--version
Erlang / OTP 22[erts - 10.6 .4][source][64 - bit][smp: 4: 4][ds: 4: 4: 10][async -threads: 1][hipe]

Elixir 1.10 .1(compiled with Erlang / OTP 22)

$ mix deps | grep phoenix | grep locked
locked at 2.0 .0(phoenix_pubsub) c52d948c
locked at 2.14 .2(phoenix_html) 58061 c8d
locked at 1.5 .3(phoenix) 8e16 febe
locked at 1.2 .1(phoenix_live_reload) 41 b4103a
locked at 0.13 .3(phoenix_live_view) c6309a7d
locked at 0.2 .5(phoenix_live_dashboard) 6 d6e57f1
locked at 4.1 .0(phoenix_ecto) c5e666a3

$ cat / etc / issue
Debian GNU / Linux 10\ n\ l

Other "babel-loader" queries related to "Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react'"