升级React(v18)和react-scripts至v5后遇Can't resolve 'fs'问题求替代方案

react-scripts v5移除了对Node.js核心模块（如fs）的默认polyfill，这是导致该错误的核心原因。除你提到的三个方案外，还有以下更友好的替代方案：

方案1：使用react-app-rewired + customize-cra修改配置（无需eject） #

该方案可在不执行eject的前提下自定义Webpack配置：

• 安装依赖：

  npm install react-app-rewired customize-cra --save-dev
  

• 在项目根目录创建config-overrides.js文件，添加配置：

  const { override, addWebpackResolve } = require('customize-cra');
  
  module.exports = override(
    addWebpackResolve({
      fallback: {
        // 将fs设为false，忽略该模块（浏览器环境无需fs）
        "fs": false
      }
    })
  );
  

• 修改package.json中的脚本命令，替换react-scripts为react-app-rewired：

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

方案2：使用craco自定义Webpack配置（无需eject） #

craco是另一个扩展create-react-app配置的工具，操作更简洁：

• 安装依赖：

  npm install @craco/craco --save-dev
  

• 项目根目录创建craco.config.js文件：

  module.exports = {
    webpack: {
      configure: {
        resolve: {
          fallback: {
            fs: false
          }
        }
      }
    }
  };
  

• 更新package.json的脚本：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
  

方案3：排查并移除不必要的fs依赖 #

多数情况下，错误源于代码或第三方库在浏览器环境中不必要地引入了fs：

• 自查代码：若存在import fs from 'fs'，确认是否在浏览器端执行——若为后端逻辑，将其移至服务器；若需处理文件，替换为浏览器原生API（如FileReader、localStorage）或前端文件操作库。
• 检查第三方库：部分库同时支持Node.js和浏览器环境，可尝试导入其浏览器适配版本（查看库的package.json中browser字段，或使用import xxx from 'xxx/browser'路径）。

方案对比 #

• 方案1、2无需eject，保留create-react-app的官方更新能力，比直接eject更安全。
• 方案3从根源解决问题，若能移除不必要的fs依赖，是最优解。

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