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-27T17:50:19.217

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 '18 at 17:50

answered Sep 27 '18 at 16:50

Matthi

1,073
8
19

score 8 · Answer 2 · answered Sep 27 '18 at 16:45

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 '18 at 16:45

zebnat

521
3
13

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. – user3342735 Sep 27 '18 at 17:18
1

webpack presets option is a replacement for babelrc https://stackoverflow.com/questions/48476373/whats-the-difference-when-configuring-webpack-babel-loader-vs-configuring-it-wit – zebnat Sep 27 '18 at 17:31
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. – stackleit Mar 08 '19 at 14:58

Hamit YILDIRIM · Answer 3 · 2018-11-30T10:03:20.590

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 — Carmine Tambascia, Dec 19 '19 at 13:45

score 0 · Answer 4 · edited Jun 27 '21 at 01:13

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 '21 at 01:13

Dharman

30,962
25
85
135

answered Jun 27 '21 at 01:07

LaLa

101
11

score 0 · Answer 5 · answered Jul 06 '21 at 14:56

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 06 '21 at 14:56

ashish siddhu

179
4
5

It would be more helpful to post the actual code from the file, instead of a screenshot. – Guillermo Aguirre Jul 08 '21 at 22:44

score 0 · Answer 6 · edited Sep 07 '21 at 07:14

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 07 '21 at 07:14

Brent Dillingham

1,019
1
13
22

answered Sep 06 '21 at 19:15

Abhishek Verma

1

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

6 Answers6

Linked