React build issue, ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js):

Question

I am trying to build react application from scratch using Webpack 4

I am getting following error when I try to build. Whereas babel-core is already installed, I also tried installing @babel/core but it didn't work

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/digvijay.upadhyay/digvijayu/react_webpack_4_from_scratch/node_modules/babel-loader/lib/index.js:5:15)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 500 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Failed to compile.

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [htmlPlugin]
};

edit: Added the package json file to the question package.json

  "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^8.0.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "html-webpack-plugin": "^3.2.0",
        "webpack": "^4.17.1",
        "webpack-cli": "^3.1.0",
        "webpack-dev-server": "^3.1.6"
      },
      "dependencies": {
        "@babel/core": "^7.0.0",
        "path": "^0.12.7",
        "react": "^16.4.2",
        "react-dom": "^16.4.2"
      }

{
  "name": "boiler-plate-react-webpack-4",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --display-error-details",
    "build-dev": "webpack --mode development",
    "build-prod": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.6"
  },
  "dependencies": {
    "@babel/core": "^7.0.0",
    "path": "^0.12.7",
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }
}

Digvijay Upadhyay · Accepted Answer · 2018-08-28 14:45:12Z

9

Solved:

The problem was with package babel-loader, the latest version expects @babel/core. Downgraded the version to 7.x and it's fine now

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.6"
  },
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }

answered Aug 28, 2018 at 14:45

Digvijay Upadhyay

7591 gold badge12 silver badges25 bronze badges

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

Comments

nnyby · Accepted Answer · 2018-08-29 03:49:56Z

Yeah, babel-loader 8 requires babel 7, confusingly. If you want to use the new babel though, it's pretty straightforward. You'd do something like this:

"devDependencies": {
    "babel-loader": "^8.0.0",
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",,
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.6"
  },
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }

Plus a small change to your babel presets, wherever you're defining them:

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

You can see a diff for a project I updated to babel 7 here: https://github.com/ccnmtl/astro-interactives/commit/97b31ca7948d177d7f41439bdbeb0a54cd3e69da

Asif Raza · Accepted Answer · 2019-05-26 09:25:12Z

1

Try to install latest loader.

   npm install -D babel-loader @babel/core @babel/preset-env OR
   npm install -D babel-loader@latest @babel/core@latest @babel/preset-env@latest

answered May 26, 2019 at 9:25

Asif Raza

1,0297 silver badges14 bronze badges

Comments

Wesgur · Accepted Answer · 2018-08-29 04:09:19Z

0

Another way to solve this is to keep the @babel/core and install babel-core : ^7.0.0-bridge.0. It's a bridge package that allows you to have support for the previous babel packages and update your babel core to the latest. Then you can update your babel-loader to LTS also.

answered Aug 29, 2018 at 4:09

Wesgur

3,2873 gold badges20 silver badges28 bronze badges

Comments

Pulak Deyashi · Accepted Answer · 2021-03-18 15:17:40Z

0

Use babel dependencies version

>=7.8.7

"devDependencies": {
    "@babel/cli": "^7.13.10",
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "@babel/preset-react": "^7.12.13",
}

answered Mar 18, 2021 at 15:17

Pulak Deyashi

781 silver badge3 bronze badges

Collectives™ on Stack Overflow

React build issue, ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js):

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related