React项目安装react-export-excel报错：无法解析'fs'模块求助

问题原因 #

react-export-excel依赖的xlsx库包含Node.js环境专属的fs模块代码，但React项目运行在浏览器环境中，不存在该模块，因此触发解析错误。

可行解决方案 #

方案1：自定义webpack配置（非Create React App项目） #

在webpack配置文件中添加fs模块的 fallback 配置，让webpack在浏览器环境中忽略该模块：

module.exports = {
  // 保留原有其他配置
  resolve: {
    fallback: {
      "fs": false
    }
  }
};

方案2：用react-app-rewired修改配置（Create React App项目） #

Create React App默认不允许直接修改webpack配置，可通过react-app-rewired绕过限制：

1. 安装依赖：

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

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

module.exports = function override(config, env) {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    "fs": false
  };
  return config;
};

3. 修改package.json中的脚本命令：

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

方案3：替换为浏览器友好的导出库 #

如果配置修改仍有问题，可直接换用仅支持浏览器环境的导出工具，比如react-csv：

• 安装依赖：

npm install react-csv

• 基础使用示例：

import { CSVLink } from "react-csv";

const userData = [
  { username: "张三", age: 28 },
  { username: "李四", age: 32 }
];

function App() {
  return (
    <CSVLink data={userData} filename="user_list.csv">
      导出用户数据
    </CSVLink>
  );
}

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