如何升级React项目中react-scripts版本并解决fs依赖错误

当前我的react-scripts版本为2.0.5（通过npm view react-script version命令确认），项目编译时出现Can't resolve 'fs' in react-script错误。我推测该错误与react-scripts版本有关，但尝试升级未成功，希望了解正确的升级方法。另外，我已经通过添加config.overrides.js文件解决了webpack < 5 used to include polyfills for node.js core modules by default相关错误，但仍无法解决当前的fs模块找不到问题。

错误信息 #

Compiled with problems:X

ERROR in ./node_modules/destroy/index.js 15:17-41

Module not found: Error: Can't resolve 'fs' in 'C:\Users\enest\OneDrive\Masaüstü\reactprojects\stajreact\node_modules\destroy'

当前config.overrides.js内容 #

const webpack = require('webpack'); 
module.exports = function override(config) { 
        const fallback = config.resolve.fallback || {}; 
        Object.assign(fallback, { 
        "crypto": require.resolve("crypto-browserify"), 
      "stream": require.resolve("stream-browserify"), 
      "assert": require.resolve("assert"), 
      "http": require.resolve("stream-http"), 
      "https": require.resolve("https-browserify"), 
      "os": require.resolve("os-browserify"), 
      "url": require.resolve("url"), 
      "zlib": require.resolve("browserify-zlib"),
     
      }) 
   config.resolve.fallback = fallback; 
   config.plugins = (config.plugins || []).concat([ 
    new webpack.ProvidePlugin({ 
        process: 'process/browser', 
      Buffer: ['buffer', 'Buffer'] 
    }) 
   ]) 
   return config; }

react-scripts升级方法 #

1. 先卸载旧版本：

npm uninstall react-scripts

2. 安装最新稳定版：

npm install react-scripts@latest

如果使用yarn包管理器，执行：

yarn remove react-scripts && yarn add react-scripts@latest

3. 若升级后出现依赖问题，可尝试清理npm缓存后重新安装依赖：

npm cache clean --force
npm install

"Can't resolve 'fs'"错误修复 #

fs是Node.js核心模块，浏览器环境并不支持该模块。报错是因为destroy模块依赖了fs，但在浏览器场景下不需要这个功能，只需在webpack配置中忽略fs模块即可：

修改config.overrides.js，在fallback对象中添加"fs": false：

const webpack = require('webpack'); 
module.exports = function override(config) { 
        const fallback = config.resolve.fallback || {}; 
        Object.assign(fallback, { 
        "crypto": require.resolve("crypto-browserify"), 
      "stream": require.resolve("stream-browserify"), 
      "assert": require.resolve("assert"), 
      "http": require.resolve("stream-http"), 
      "https": require.resolve("https-browserify"), 
      "os": require.resolve("os-browserify"), 
      "url": require.resolve("url"), 
      "zlib": require.resolve("browserify-zlib"),
      "fs": false // 新增：告诉webpack忽略fs模块
      }) 
   config.resolve.fallback = fallback; 
   config.plugins = (config.plugins || []).concat([ 
    new webpack.ProvidePlugin({ 
        process: 'process/browser', 
      Buffer: ['buffer', 'Buffer'] 
    }) 
   ]) 
   return config; }

修改后重新编译项目，fs相关的报错即可解决。

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