Webpack + React无法解决子模块中的“react”

Question

我正在尝试使用webpack来为我的反应性应用程序提供一个更小的包。我有两个部分(client和admin)，但我只关心client部分。

我尝试了以下几点：

• 在根目录中创建了webpack.config.js文件

module.exports ={模块：{规则：[{ test: /.jsx?$/，排除:/node_node/，加载程序：‘babel-加载程序’，选项：{ babelrc: false，预设：‘@babel/预设-env’，‘@babel/预设-react’，插件：‘@babel/plugin-提案-class-properties’，}，}，{ test: /.css$/i，使用：'style-loader'，‘css-加载程序’，}，{ test: /..sacss$/i，使用：‘风格-加载程序’，‘css-加载程序’，‘sass-加载程序’，}，{ test: /.svg$/，加载程序：‘svg-内联-加载程序’，}，{ test: /.(png\jpe?g\gif)$/i，使用：{加载程序：‘文件加载程序’，}，}；

• 我添加了options来忽略babel，因为我无法使它导入.babelrc文件，并且它一直抛出：

Support for the experimental syntax 'jsx' isn't currently enabled.

然而，每次我运行webpack时，它都会抛出以下错误：

ERROR in ./node_modules/react-side-effect/lib/index.js Module not found: Error: Can't resolve 'react' in 'project_path\node_modules\react-side-effect\lib'

ERROR in ./client/src/App.js Module not found: Error: Can't resolve 'style-loader' in 'project_path'

ERROR in ./client/src/components/resources/PDFCard.js Module not found: Error: Can't resolve 'style-loader' in 'project_path'

我是不是输入了一个测试

编辑

这是babel文件：

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

package.json

{
  "name": "app_name",
  "version": "1.6.1",
  "description": "app_description",
  "main": "server.js",
  "engines": {
    "node": "12.16.3"
  },
  "scripts": {
    "build": "webpack --mode development ./client/src/index.js --output ./client/public/bundle.js",
    "start": "node server",
    "server": "nodemon server",
    "client": "npm start --prefix client",
    "admin": "npm start --prefix admin",
    "dev": "concurrently \"npm run server\" \"npm run client\" \"npm run admin\""
  },
  "author": "David - Marian Buzatu",
  "license": "MIT",
  "dependencies": {
    "apexcharts": "^3.19.0",
    "aws-sdk": "^2.671.0",
    "bcryptjs": "^2.4.3",
    "config": "^3.3.1",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "express-validator": "^6.4.1",
    "jsonwebtoken": "^8.5.1",
    "moment": "^2.25.3",
    "mongoose": "^5.9.12",
    "multer": "^1.4.2",
    "multer-s3": "^2.9.0",
    "node-sass": "^4.14.1",
    "nodemailer": "^6.4.6",
    "react-apexcharts": "^1.3.7",
    "react-helmet": "^6.1.0",
    "react-minimal-pie-chart": "^6.0.1",
    "react-pdf": "^4.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.11.4",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.11.0",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "concurrently": "^5.2.0",
    "css-loader": "^4.2.2",
    "file-loader": "^6.0.0",
    "nodemon": "^2.0.3",
    "sass": "^1.26.10",
    "sass-loader": "^10.0.1",
    "svg-inline-loader": "^0.8.2",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

另外，我正在根文件夹中运行npm run build脚本。react项目所在的client位于此根文件夹中。

Answer 1

显然，问题在于该项目是使用npx create-react-app命令构建的。这款手机附带了一些react-scripts，它们自己制作webpack，负责捆绑业务。

Answer 2

对我来说，我只需要将react、react-native和react-dom安装为devDependencies，尽管它们已经在peerDependencies中了。国际海事组织这样做是为了让Webpack能够真正理解import React from 'react';来自何方( node_modules)。