如何解决React+Webpack+Yarn项目中的‘Module not found’错误？

未修改任何代码，在使用Webpack和Yarn的React项目中突然出现大量Module not found错误，具体错误信息如下：

ERROR in ./node_modules/cookie-signature/index.js 5:13-30
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\cookie-signature'

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: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }

ERROR in ./node_modules/destroy/index.js 15:17-41
Module not found: Error: Can't resolve 'fs' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\destroy'

ERROR in ./node_modules/destroy/index.js 16:13-30
Module not found: Error: Can't resolve 'stream' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\destroy'

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: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\etag'

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: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }

ERROR in ./node_modules/etag/index.js 21:12-31
Module not found: Error: Can't resolve 'fs' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\etag'

ERROR in ./node_modules/express/lib/application.js 22:11-26
Module not found: Error: Can't resolve 'http' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\express\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: { "http": require.resolve("stream-http") }'
    - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "http": false }

ERROR in ./node_modules/express/lib/request.js 19:11-26
Module not found: Error: Can't resolve 'http' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\express\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: { "http": require.resolve("stream-http") }'
    - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "http": false }

ERROR in ./node_modules/express/lib/response.js 20:11-26
Module not found: Error: Can't resolve 'http' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\express\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: { "http": require.resolve("stream-http") }'
    - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "http": false }

ERROR in ./node_modules/express/lib/view.js 17:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\express\lib'

ERROR in ./node_modules/mime/mime.js 2:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\mime'

ERROR in ./node_modules/safe-buffer/index.js 3:13-30
Module not found: Error: Can't resolve 'buffer' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\safe-buffer'

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: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }
ERROR in ./node_modules/safer-buffer/safer.js 5:13-30
Module not found: Error: Can't resolve 'buffer' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\safer-buffer'

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: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }
ERROR in ./node_modules/send/index.js 22:9-22
Module not found: Error: Can't resolve 'fs' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\send'
ERROR in ./node_modules/send/index.js 29:13-30
Module not found: Error: Can't resolve 'stream' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\send'

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: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }
ERROR in ./node_modules/zlib/lib/zlib.js 1:0-43
Module not found: Error: Can't resolve './zlib_bindings' in 'C:\Users\satya\Desktop\GOD2\frontend\node_modules\zlib\lib'

错误原因 #

1. Webpack 5核心特性变更：Webpack 4及更早版本会默认提供Node.js核心模块（如crypto、stream、http）的浏览器兼容polyfill，但Webpack 5移除了这一默认行为，要求开发者手动配置是否需要这些polyfill。
2. 误引入后端依赖：项目中包含了express、send、destroy这类仅适用于Node.js环境的后端模块，这些模块依赖浏览器中不存在的Node.js专属核心模块（如fs），导致打包时无法解析。

解决办法 #

方案1：移除不必要的后端依赖（优先推荐） #

React前端项目通常不需要express这类后端框架，按以下步骤清理：

• 卸载相关依赖：

yarn remove express send destroy etag cookie-signature mime zlib safe-buffer safer-buffer

• 检查项目代码，删除所有引入上述模块的语句（如import express from 'express'或require('express')）。

方案2：手动配置polyfill（若确实需要相关功能） #

如果项目必须使用这些模块的浏览器兼容版本，按以下步骤操作：

1. 安装所需的polyfill包：

yarn add crypto-browserify stream-browserify stream-http buffer process browserify-zlib

2. 修改Webpack配置文件（如webpack.config.js），添加resolve.fallback和全局变量配置：

const webpack = require('webpack');

module.exports = {
  // ...其他已有配置
  resolve: {
    fallback: {
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "http": require.resolve("stream-http"),
      "buffer": require.resolve("buffer/"),
      "zlib": require.resolve("browserify-zlib"),
      "fs": false, // 文件系统模块无法在浏览器运行，直接忽略
      "process": require.resolve("process/browser")
    }
  },
  plugins: [
    // 注入全局Buffer和process变量
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser'
    })
  ]
};

3. 若使用Create React App且未执行eject，推荐使用@craco/craco修改配置：
   • 安装@craco/craco：yarn add @craco/craco
   • 在项目根目录创建craco.config.js，将上述Webpack配置放入该文件中
   • 修改package.json中的启动脚本，将react-scripts替换为craco（如"start": "craco start"）

内容的提问来源于stack exchange，提问作者Satya sai Subash