React项目启动报Can't resolve 'fs'错误，无需修改webpack.config.js的解决办法

以下是几种无需修改项目原始webpack.config.js的解决方案，能让团队成员执行npm install后直接正常运行项目：

方案1：降级sass版本到兼容浏览器环境的旧版 #

新版本的sass（dart-sass）可能引入了Node.js环境特有的fs模块调用，导致浏览器环境下webpack打包报错。你可以降级到未触发该问题的版本，并将版本锁定在package.json中：

• 卸载当前sass：

  npm uninstall sass
  

• 安装指定兼容版本（例如1.54.8版本，该版本未触发此问题）：

  npm install sass@1.54.8 --save-dev
  

• 提交修改后的package.json和package-lock.json到代码仓库，其他成员执行npm install时会自动安装该版本，无需额外配置。

方案2：使用react-app-rewired无侵入覆盖webpack配置 #

如果不想降级sass，可以通过react-app-rewired在不 eject 项目的情况下自定义webpack配置，且配置文件可提交到仓库共享：

1. 安装依赖：

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

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

   module.exports = function override(config, env) {
     // 扩展webpack的resolve.fallback配置，将fs设为false
     config.resolve.fallback = {
       ...(config.resolve.fallback || {}),
       "fs": false
     };
     return config;
   };
   

3. 修改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. 提交config-overrides.js和修改后的package.json到仓库，其他成员安装依赖后直接执行npm start即可自动应用该配置。

方案3：替换为node-sass（不推荐，已废弃） #

虽然node-sass已官方废弃，但如果项目对兼容性要求不高，可以替换为node-sass以避免该问题：

• 卸载sass：

  npm uninstall sass
  

• 安装node-sass（注意选择与本地Node.js版本匹配的版本）：

  npm install node-sass --save-dev
  

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