新版本React项目遭遇Webpack模块缺失问题求助

我已按照相关指引操作，但仍未解决该错误，目前毫无头绪。我认为使用4.0.3版本的React项目可能能修复问题，但不知如何实现。我尝试安装了https-browserify、zlib、browserify-zlib，还在项目中创建webpack.global.js文件添加fallback配置，但均未成功。

我的package.json配置如下：

{
  "name": "self-improvement",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^29.5.0",
    "@types/node": "^16.11.14",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "ansi-html-community": "^0.0.8",
    "babel-loader": "^9.1.3",
    "browserify-zlib": "^0.2.0",
    "discord-oauth2": "^2.12.0",
    "eris": "^0.17.2",
    "https": "^1.0.0",
    "https-browserify": "^1.0.0",
    "postcss-loader": "^7.3.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.2.1",
    "react-scripts": "4.0.3",
    "source-map-loader": "^4.0.2",
    "typescript": "^4.5.4",
    "web-vitals": "^2.1.4",
    "zlib": "^1.0.5"
  },
  "devDependencies": {
    "assert": "^2.1.0",
    "autoprefixer": "^10.4.8",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "os-browserify": "^0.3.0",
    "postcss": "^8.4.16",
    "process": "^0.11.10",
    "react-app-rewired": "^2.2.1",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "tailwindcss": "^3.1.8",
    "url": "^0.11.3"
  },
}

问题根源与解决步骤 #

1. 核心问题：引入Node端专属库

你依赖里的eris是Discord的Node.js机器人库，它本身依赖Node.js核心模块（如https、zlib），这些模块在浏览器环境下不存在，这才是Webpack报错的根本原因。如果你的项目是前端项目（用于浏览器运行），完全不需要这个包，直接移除：

npm uninstall eris

2. 修正Webpack配置（通过react-app-rewired）

你已经安装了react-app-rewired，但配置文件位置不对——在项目根目录创建config-overrides.js，内容如下：

const webpack = require('webpack');

module.exports = function override(config, env) {
  // 配置Webpack fallback，映射Node核心模块到浏览器兼容版本
  config.resolve.fallback = {
    ...config.resolve.fallback,
    "https": require.resolve("https-browserify"),
    "zlib": require.resolve("browserify-zlib"),
    "stream": require.resolve("stream-browserify"),
    "buffer": require.resolve("buffer"),
    "crypto": require.resolve("crypto-browserify"),
    "os": require.resolve("os-browserify"),
    "url": require.resolve("url"),
    "assert": require.resolve("assert")
  };

  // 注入全局变量，模拟Node环境
  config.plugins.push(
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser'
    })
  );

  return config;
};

3. 清理不必要的依赖

移除dependencies里的https、zlib包（这些是Node核心模块，不需要单独安装，你已经有browserify的兼容版本）：

npm uninstall https zlib

4. 修改启动脚本

在package.json的scripts里替换react-scripts为react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

5. 验证修复

重新启动项目：

npm start

内容的提问来源于stack exchange，提问作者John Nagy