MERN+Redux项目中child_process模块找不到错误求助

我正在开发一个基于Redux的MERN应用，这是首次使用ReactJS、Webpack等工具，目前持续遇到以下模块解析错误：

! ERROR in ../node_modules/nodemon/lib/monitor/run.js 5:19-43
模块未找到：错误：无法解析'child_process'于'C:\Programming\REST_API\node_modules\nodemon\lib\monitor'
ERROR in ../node_modules/nodemon/lib/spawn.js 5:14-44
模块未找到：错误：无法解析'child_process'于'C:\Programming\REST_API\node_modules\nodemon\lib'
ERROR in ../node_modules/nodemon/lib/version.js 5:11-40
模块未找到：错误：无法解析'child_process'于'C:\Programming\REST_API\node_modules\nodemon\lib'
ERROR in ../node_modules/pstree.remy/lib/index.js 1:13-42
模块未找到：错误：无法解析'child_process'于'C:\Programming\REST_API\node_modules\pstree.remy\lib'
ERROR in ../node_modules/pstree.remy/lib/tree.js 1:14-44
模块未找到：错误：无法解析'child_process'于'C:\Programming\REST_API\node_modules\pstree.remy\lib'
ERROR in ../node_modules/pstree.remy/lib/utils.js 1:14-44
模块未找到：错误：无法解析'child_process'于'C:\Programming\REST_API\node_modules\pstree.remy\lib'

已尝试的操作 #

• 使用react-app-rewired重新配置Webpack
• 在node_modules的react-scripts文件中添加fallback配置，修改webpack.config.js的resolve部分：

fallback: {
    fs: false,
    child_process: false,
    path: require.resolve("path-browserify"),
    util: require.resolve("util/"),
},

当前package.json配置 #

{
  "name": "frontend",
  "version": "0.1.0",
  "proxy": "http://localhost:8080",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.7",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.5.2",
    "axios": "^1.6.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.0.1",
    "react-redux": "^8.1.3",
    "react-router-dom": "^6.21.2",
    "react-scripts": "5.0.1",
    "react-toastify": "^10.0.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",
    "build-css": "tailwindcss build src/style.css -o public/style.css"
  },
  "browser": {
    "fs": false,
    "child-process": false
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "buffer": "^6.0.3",
    "child-process": "^1.0.2",
    "file-loader": "^6.2.0",
    "path-browserify": "^1.0.1",
    "sass": "^1.70.0",
    "sass-loader": "^14.0.0",
    "tailwindcss": "^3.4.1",
    "util": "^0.12.5",
    "webpack": "^5.90.0",
    "webpack-cli": "^5.1.4"
  }
}

解决步骤 #

1. 移除前端无关依赖 #

nodemon是Node.js后端工具，pstree.remy、child-process也是后端环境依赖，前端完全不需要。执行命令卸载：

npm uninstall nodemon pstree.remy child-process

2. 修正package.json的browser字段 #

将"child-process": false改为Node.js内置模块的正确名称（下划线格式）：

"browser": {
  "fs": false,
  "child_process": false
}

3. 正确配置react-app-rewired #

不要直接修改node_modules中的文件，在项目根目录创建config-overrides.js，写入以下内容：

module.exports = function override(config, env) {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    fs: false,
    child_process: false,
    path: require.resolve("path-browserify"),
    util: require.resolve("util/"),
  };
  return config;
};

4. 清理缓存并重装依赖 #

rm -rf node_modules package-lock.json
npm install
npm start

关键原因 #

child_process是Node.js专属内置模块，浏览器环境无法解析。nodemon作为后端工具，误被引入前端依赖时，Webpack会尝试打包它的依赖，从而触发解析错误。

内容的提问来源于stack exchange，提问作者SOUMYADIP SANYAL