React+Webpack集成node-fetch遇node:模块未处理错误求助

问题根源 #

node-fetch v3及以上版本为Node.js环境设计，依赖node:buffer、node:fs等Node核心模块，但浏览器环境不支持这些模块，且Webpack 5默认不处理node:协议的导入请求，导致报错。

解决方案 #

方案一：降级node-fetch到兼容浏览器的v2版本

这是最简便的解决方式，v2版本原生支持浏览器环境，无需额外配置：

npm uninstall node-fetch
npm install node-fetch@2

方案二：针对node-fetch v3+配置Webpack

如果必须使用v3+版本，按以下步骤修改Webpack配置：

1. 安装必要的polyfill依赖：

npm install buffer process util

2. 修改Webpack配置文件：

const webpack = require('webpack');

module.exports = {
  // ...其他已有配置
  resolve: {
    fallback: {
      // 为Node核心模块提供浏览器端polyfill
      "buffer": require.resolve("buffer"),
      "util": require.resolve("util"),
      "process": require.resolve("process/browser"),
      // fs模块无法在浏览器环境模拟，直接置为false忽略
      "fs": false
    },
    // 映射node:协议的导入到对应的polyfill模块
    alias: {
      "node:buffer": "buffer",
      "node:util": "util",
      "node:process": "process/browser"
    }
  },
  plugins: [
    // 全局注入process和Buffer对象，避免模块找不到全局变量
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ]
};

3. （可选）如果仍有其他node:协议模块报错，按相同逻辑在resolve.alias和resolve.fallback中添加对应配置，比如node:path可映射到path-browserify（需先安装该包）。

验证配置 #

修改完成后重启Webpack开发服务，测试node-fetch的调用代码，确认错误是否消失。

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