Блог

Ну, здесь я пытаюсь создать приложение react и хочу использовать простой пакет walletconnect и пытаюсь создать файл сборки моего приложения react, но я получаю ошибку модуля при запуске команды webpack для создания файла сборки моего приложения. Обратная трассировка приведена ниже:

  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:UsersAHMEDDotesrowdotescrownode_modules@babelcorelibconfigfilesplugins.js
- C:UsersAHMEDDotesrowdotescrownode_modules@babelcorelibconfigfilesindex.js
- C:UsersAHMEDDotesrowdotescrownode_modules@babelcorelibindex.js
- C:UsersAHMEDDotesrowdotescrownode_modulesbabel-loaderlibindex.js
- C:UsersAHMEDDotesrowdotescrownode_modulesloader-runnerlibloadLoader.js
- C:UsersAHMEDDotesrowdotescrownode_modulesloader-runnerlibLoaderRunner.js
- C:UsersAHMEDDotesrowdotescrownode_moduleswebpacklibNormalModule.js
- C:UsersAHMEDDotesrowdotescrownode_moduleswebpacklibNormalModuleFactory.js
- C:UsersAHMEDDotesrowdotescrownode_moduleswebpacklibCompiler.js
- C:UsersAHMEDDotesrowdotescrownode_moduleswebpacklibwebpack.js
- C:UsersAHMEDDotesrowdotescrownode_moduleswebpacklibindex.js
- C:UsersAHMEDDotesrowdotescrownode_moduleswebpack-clilibwebpack-cli.js
- C:UsersAHMEDDotesrowdotescrownode_moduleswebpack-clilibbootstrap.js
- C:UsersAHMEDDotesrowdotescrownode_moduleswebpack-clibincli.js
- C:UsersAHMEDDotesrowdotescrownode_moduleswebpackbinwebpack.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:UsersAHMEDDotesrowdotescrownode_modulesv8-compile-cachev8-compile-cache.js:164:23)
    at resolveStandardizedName (C:UsersAHMEDDotesrowdotescrownode_modules@babelcorelibconfigfilesplugins.js:100:7)
    at resolvePreset (C:UsersAHMEDDotesrowdotescrownode_modules@babelcorelibconfigfilesplugins.js:48:10)
    at loadPreset (C:UsersAHMEDDotesrowdotescrownode_modules@babelcorelibconfigfilesplugins.js:67:20)
    at createDescriptor (C:UsersAHMEDDotesrowdotescrownode_modules@babelcorelibconfigconfig-descriptors.js:154:9)
    at C:UsersAHMEDDotesrowdotescrownode_modules@babelcorelibconfigconfig-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (C:UsersAHMEDDotesrowdotescrownode_modules@babelcorelibconfigconfig-descriptors.js:109:29)
    at createPresetDescriptors (C:UsersAHMEDDotesrowdotescrownode_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',
        
      }
    ]
  },

}
 

Визуальная ошибка.

Если требуется больше кода, сообщите мне в комментариях. Я обновлю свой вопрос с помощью этой информации, спасибо.

@babel/core это не предустановка, удалите ее из presets массива в вашем babelrc.