javascript - Module build failed (from ./node_modules/babel-loader/lib/index.js):

Question

Well Here i'm trying to create a react app and want to use simple walletconnect package and trying to create a build file of my react app but i'm getting module error when i run webpack command to create the build file of my app. The traceback is given below:

 ERROR in ./frontend/src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-core'
Require stack:
- C:UsersAHMEDDotesrowdotescrow
ode_modules@babelcorelibconfigfilesplugins.js
- C:UsersAHMEDDotesrowdotescrow
ode_modules@babelcorelibconfigfilesindex.js
- C:UsersAHMEDDotesrowdotescrow
ode_modules@babelcorelibindex.js
- C:UsersAHMEDDotesrowdotescrow
ode_modulesabel-loaderlibindex.js
- C:UsersAHMEDDotesrowdotescrow
ode_modulesloader-runnerlibloadLoader.js
- C:UsersAHMEDDotesrowdotescrow
ode_modulesloader-runnerlibLoaderRunner.js
- C:UsersAHMEDDotesrowdotescrow
ode_moduleswebpacklibNormalModule.js
- C:UsersAHMEDDotesrowdotescrow
ode_moduleswebpacklibNormalModuleFactory.js
- C:UsersAHMEDDotesrowdotescrow
ode_moduleswebpacklibCompiler.js
- C:UsersAHMEDDotesrowdotescrow
ode_moduleswebpacklibwebpack.js
- C:UsersAHMEDDotesrowdotescrow
ode_moduleswebpacklibindex.js
- C:UsersAHMEDDotesrowdotescrow
ode_moduleswebpack-clilibwebpack-cli.js
- C:UsersAHMEDDotesrowdotescrow
ode_moduleswebpack-clilibootstrap.js
- C:UsersAHMEDDotesrowdotescrow
ode_moduleswebpack-cliincli.js
- C:UsersAHMEDDotesrowdotescrow
ode_moduleswebpackinwebpack.js
- If you want to resolve "@babel/core", use "module:@babel/core"
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at resolve (C:UsersAHMEDDotesrowdotescrow
ode_modulesv8-compile-cachev8-compile-cache.js:164:23)
    at resolveStandardizedName (C:UsersAHMEDDotesrowdotescrow
ode_modules@babelcorelibconfigfilesplugins.js:100:7)
    at resolvePreset (C:UsersAHMEDDotesrowdotescrow
ode_modules@babelcorelibconfigfilesplugins.js:48:10)
    at loadPreset (C:UsersAHMEDDotesrowdotescrow
ode_modules@babelcorelibconfigfilesplugins.js:67:20)
    at createDescriptor (C:UsersAHMEDDotesrowdotescrow
ode_modules@babelcorelibconfigconfig-descriptors.js:154:9)
    at C:UsersAHMEDDotesrowdotescrow
ode_modules@babelcorelibconfigconfig-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (C:UsersAHMEDDotesrowdotescrow
ode_modules@babelcorelibconfigconfig-descriptors.js:109:29)
    at createPresetDescriptors (C:UsersAHMEDDotesrowdotescrow
ode_modules@babelcorelibconfigconfig-descriptors.js:101:10)

webpack 5.13.0 compiled with 1 error in 1736 ms

babelrc

     {
    "presets": ["@babel/preset-env","@babel/preset-react","@babel/core"],
    "plugins": ["transform-class-properties"]
}

package.json

{
  "name": "dotescrow",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack --mode development frontend/src/index.js --output-path ./frontend/static/main.js",
    "build": "webpack --mode production frontend/src/index.js --output-path ./frontend/static/main.js/main.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/AhmedYasin487/Dotescrow.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/AhmedYasin487/Dotescrow/issues"
  },
  "homepage": "https://github.com/AhmedYasin487/Dotescrow#readme",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "webpack": "^5.13.0",
    "webpack-cli": "^4.3.1"
  },
  "dependencies": {
    "@walletconnect/client": "^1.3.3",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-native": "^0.63.4",
    "walletconnect": "^1.3.3"
  },
  "description": ""
}

webpack.confi.js

const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, 'frontend/src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'frontend/static/main.js'),
    filename: 'main.js'
  },
  mode:'development',
  module: {
    rules: [
      {
        test: /.(jsx|js)$/,
        // include: path.resolve(__dirname, 'frontend/src'),
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        
      }
    ]
  },

}

Visual error.

If more code is require then tell me in a comments. I'll update my question with that information thank you.

Answer 1

@babel/core is not a preset, remove that from the presets array in your babelrc.