网络包反应 - 无法解析子模块中的“反应”

Question

我正在尝试使用 webpack 来为我的 react 应用程序的一小部分提供服务。我有两个部分（客户端和管理员），但我只对客户端部分有顾虑。

我尝试了以下方法：

>

在根目录下创建webpack.config.js文件

module.exports = {
    module: {
        rules: [
          {
              test: /\.jsx?$/,
              exclude: /node_modules/,
              loader: 'babel-loader',
              options: {
                  babelrc: false,
                  presets: ['@babel/preset-env', '@babel/preset-react'],
                  plugins: ['@babel/plugin-proposal-class-properties'],
              },
         },
         {
              test: /\.css$/i,
              use: ['style-loader', 'css-loader'],
         },
         {
              test: /\.s[ac]ss$/i,
              use: [
              'style-loader',
              'css-loader',
              'sass-loader',
              ],
         },
         {
              test: /\.svg$/,
              loader: 'svg-inline-loader',
         },
         {
              test: /\.(png|jpe?g|gif)$/i,
              use: [
               {
                 loader: 'file-loader',
               },
              ],
         },
       ],
   },
};

我添加了选项来忽略babel，因为我无法使它导入。babelrc文件，它不断抛出：

目前未启用对实验性语法“jsx”的支持。

但是，每次我运行webpack时，它都会抛出诸如以下的错误：

找不到模块中的 ./node_modules/反应副作用/库/索引.js错误：错误：无法解析“project_path\node_modules\反应副作用\lib” 中的“反应”

./client/src/App中有错误。找不到js模块：错误：无法解析“project_path”中的“style loader”

./client/src/components/resources/PDFCard中出现错误。找不到js模块：错误：无法解析“project_path”中的“style loader”

我是不是把测试打错了？

编辑

这是巴别文件：

{
  "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"
  }
}

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

Answer 1

对我来说，我只需要安装< code>react 、< code>react-native和< code>react-dom作为devDependencies，即使它们已经在peerDependencies中。IMO这是为了让Webpack能够真正理解< code > import React from‘React’；来自(node_modules)。

Answer 2

显然，问题是该项目是使用npx create-react-app命令构建的。那个带有一些react-script，它们生成自己的webpack并负责捆绑。