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

Question

I'm stuck with the following error when trying to build a react app with Webpack4 and Babel7.

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-react' from '/Users/me/Desktop/reflask'
- If you want to resolve "react", use "module:react"
- Did you mean "@babel/react"?
    at Function.module.exports [as sync] (/Users/me/Desktop/reflask/node_modules/resolve/lib/sync.js:43:15)
    at resolveStandardizedName (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePreset (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
    at loadPreset (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
    at createDescriptor (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at passPerPreset (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/config-descriptors.js:58:96)
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1]

I've tried removing the node_modules folder and reinstalling dependencies with the following.

Terminal

rm -rf node_modules/
npm install

Configuration

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

Matthi · Accepted Answer · 2018-09-27 17:50:19Z

29

in your webpack config did you already try @babel/preset-react instead of just react?

Btw. you test for /\.js$/ Better test for /\.jsx?$/ (x? means x is optional), because you import a .jsx file in your index.js

Not

options: {
    presets: ['react']
}

but

options: {
    presets: ['@babel/preset-react']
}

edited Sep 27, 2018 at 17:50

answered Sep 27, 2018 at 16:50

Matthi

1,0738 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zebnat · Accepted Answer · 2018-09-27 16:45:06Z

8

place .babelrc file at root dir with this inside

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

and remove preset from babel-loader webpack cfg

options: {
  presets: ['react']
}

answered Sep 27, 2018 at 16:45

zebnat

5213 silver badges14 bronze badges

3 Comments

user3342735 Over a year ago

Sorry, I should have mentioned that the .babelrc file is already in root and includes just what you have above. Also I added presets: ['react'] part because I was getting an error 'Module parse failed: Unexpected token' in ./src/js/components/App.jsx; refering to some html in that file.

zebnat Over a year ago

webpack presets option is a replacement for babelrc stackoverflow.com/questions/48476373/…

stackleit Over a year ago

As zebnat says, the webpack presets option is a perfectly fine alternative to babelrc. Anything that helps developers consolidate configuration files shouldn't be discouraged.

Hamit YILDIRIM · Accepted Answer · 2018-11-30 10:03:20Z

I did it at the end with this settings, (becouse es2015 has been changed https://www.npmjs.com/package/babel-preset-es2015) now!

And presets in package.json or .babelrc or babel.config ::

use: {
                  loader: 'babel-loader',
                  options: {
                      presets: ['@babel/react', '@babel/preset-env'],
                          plugins: ['@babel/plugin-proposal-class-properties']
                  }
              }

and..

"devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-transform-react-constant-elements": "^7.0.0",
    "@babel/plugin-transform-react-inline-elements": "^7.0.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "@babel/runtime": "^7.1.5",
    "babel-eslint": "^8.2.6",
    "babel-loader": "^8.0.4",
    "babel-node": "^6.5.3",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-react-pure-class-to-function": "^1.0.1",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.20",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.26.1"
  }

and the code that you call to preset example:

   "theme:build": "babel theme/src -d theme/dist --presets @babel/react --plugins transform-class-properties --quiet && npm run webpack:store",

presets @babel/react

in github very much forum about the subject!

Keep having this error with old repo not quite well updated babel dependecies and with setting in webpack 4. The first part did worked for me, having changed my webpack as above

Dharman · Accepted Answer · 2021-06-27 01:13:13Z

0

I had the same error before, I just run the app on another port.

To do so run this command in ur terminal

npm start

Then it'll ask if u want to run the app on another port write

y

edited Jun 27, 2021 at 1:13

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Jun 27, 2021 at 1:07

LaLa

1211 silver badge12 bronze badges

Comments

ashish siddhu · Accepted Answer · 2021-07-06 14:56:07Z

0

It worked for me, I had to change ['react'] to ['@babel/preset-react'] in .bablerc
If your are upgrading babel from 6.x to 7.x

answered Jul 6, 2021 at 14:56

ashish siddhu

2294 silver badges5 bronze badges

1 Comment

Guillermo Aguirre Over a year ago

It would be more helpful to post the actual code from the file, instead of a screenshot.

Brent Dillingham · Accepted Answer · 2021-09-07 07:14:42Z

0

If your are upgrading babel from 6.x to 7.x, It worked for me, I had to change in .bablerc :

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

edited Sep 7, 2021 at 7:14

Brent Dillingham

1,0381 gold badge13 silver badges23 bronze badges

answered Sep 6, 2021 at 19:15

Abhishek Verma

1

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

3 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related