Webpack + React - 无法解析子模块中的“反应”答案

【问题标题】：Webpack + React - Can't resolve 'react' in submoduleWebpack + React - 无法解析子模块中的“反应”
【发布时间】：2020-12-19 12:19:12
【问题描述】：

我正在尝试使用 webpack 来提供较小的 React 应用程序包。我有两个部分（client 和 admin），但我只关心client 部分。

我尝试了以下方法：

在根目录下创建了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',
               },
              ],
         },
       ],
   },
};

我添加了 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 脚本。 client，react 项目所在的位置，位于此根文件夹中。

【问题讨论】：

这些模块安装了吗？
是的，他们是。即使在生产中运行网站也没有问题。问题只发生在 webpack 上
你可以显示 package.json
我已经用package.json更新了我的问题

标签： reactjs webpack babeljs

【解决方案1】：

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

【讨论】：

那么，如果我们要手动使用 webpack，有什么解决方法呢？
我认为您需要查看此answer。您必须使用 react-scripts eject 才能获取 webpack 配置并将您的选项添加到其中。

【解决方案2】：

对我来说，我只需要安装 react、react-native 和 react-dom 作为 devDependencies，即使它们已经存在于 peerDependencies 中。 IMO 这样做是为了让 Webpack 能够真正理解 import React from 'react'; 的来源（node_modules）。

【讨论】：