React项目构建阶段出现Can't resolve 'fs'错误的求助

首先明确核心问题：fs是Node.js的内置模块，浏览器环境根本不存在这个模块，你安装的fs@0.0.1-security是npm官方的占位包（用来防止恶意同名包发布），完全没有实际功能，所以装了也解决不了问题。

分两种情况处理： #

1. 你不需要在浏览器端使用fs

• 先删除package.json里的fs依赖，执行 npm uninstall fs
• 配置Webpack忽略fs模块：
  • 如果是自定义Webpack配置，在webpack.config.js中添加：

    module.exports = {
      // 其他已有配置
      node: {
        fs: 'empty'
      }
    }
    

  • 如果用的是Create React App（CRA），默认无法直接修改Webpack配置，可通过react-app-rewired实现：
    1. 安装依赖：npm install react-app-rewired --save-dev
    2. 在项目根目录创建config-overrides.js：

       module.exports = function override(config) {
         config.node = { fs: 'empty' };
         return config;
       };
       

    3. 修改package.json的scripts：

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

2. 你确实需要处理文件操作

浏览器没有文件系统访问权限，不能直接用fs，换以下方式实现：

• 读取项目静态文件：直接用import或fetch

  // 导入JSON文件
  import config from './config.json';
  // 读取文本文件
  fetch('/static/docs/readme.txt')
    .then(res => res.text())
    .then(content => console.log(content));
  

• 处理用户上传的文件：使用浏览器的File API
• 服务器端文件操作：把逻辑放到Node.js后端，前端通过API调用接口完成操作

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