React+Node.js应用编译报错：无法解析zlib模块，求解决方案

问题描述 #

开发基于Node.js和React.js的MERN应用时，添加一段axios.delete请求代码后应用崩溃，即使注释该代码，编译错误依然存在。控制台核心错误如下：

Compiled with problems:

ERROR in ./node_modules/body-parser/lib/read.js 24:11-26

Module not found: Error: Can't resolve 'zlib' in 'C:\Users\Mateo\OneDrive\Desktop\MERN\MERN-course\client\node_modules\body-parser\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }

依赖版本 #

React客户端依赖：

"packages": {
    "": {
      "name": "client",
      "version": "0.1.0",
      "dependencies": {
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "axios": "^0.27.2",
        "moment": "^2.29.4",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-moment": "^1.1.2",
        "react-redux": "^8.0.4",
        "react-router-dom": "^6.4.1",
        "react-scripts": "5.0.1",
        "redux": "^4.2.0",
        "redux-devtools-extension": "^2.13.9",
        "redux-thunk": "^2.4.1",
        "uuid": "^9.0.0",
        "web-vitals": "^2.1.4"
      }
    }
}

Node.js服务端依赖：

"scripts": {
    "start": "node server",
    "server": "nodemon server",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "Mateo Ghidini",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.27.2",
    "bcryptjs": "^2.4.3",
    "config": "^3.3.7",
    "express": "^4.18.1",
    "express-validator": "^6.14.2",
    "gravatar": "^1.8.2",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.5.4",
    "request": "^2.88.2"
  },
  "devDependencies": {
    "assert": "^2.0.0",
    "buffer": "^6.0.3",
    "concurrently": "^7.3.0",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "nodemon": "^2.0.19",
    "os-browserify": "^0.3.0",
    "process": "^0.11.10",
    "react-app-rewired": "^2.2.1",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.0"
  }

解决方案 #

由于你已经安装了react-app-rewired，可以通过以下步骤配置polyfill：

1. 安装browserify-zlib
   在client目录下执行命令：

npm install browserify-zlib --save

2. 创建配置文件
   在client项目根目录新建config-overrides.js文件，添加以下内容：

module.exports = function override(config, env) {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    "zlib": require.resolve("browserify-zlib")
  };
  return config;
};

3. 修改启动脚本
   打开client目录下的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"
}

4. 重启开发服务器
   停止当前运行的服务，重新执行npm start（或根目录的npm run dev），错误即可解决。

备选方案（不使用polyfill） #

如果确认不需要zlib模块，可以直接在config-overrides.js中禁用：

module.exports = function override(config, env) {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    "zlib": false
  };
  return config;
};

但此方法可能会导致后续其他Node核心模块缺失的问题，建议优先使用polyfill方案。

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