使用react-export-excel报xlsx下fs解析错误 无webpack配置如何解决

该报错出现于使用react-export-excel实现前端Excel导出功能的场景，核心原因是react-export-excel依赖的旧版xlsx包默认引用了Node.js专属的fs原生模块，浏览器环境不存在该API，构建时会触发解析失败。网上通用的修改webpack配置方案找不到文件，是因为大部分React脚手架默认封装了构建配置，不会在项目根目录直接暴露webpack.config.js，对应场景的处理方式如下：

场景1：Create React App 构建的项目 #

CRA默认将webpack配置封装在react-scripts依赖内，分两种情况处理：

• 未执行过npm run eject：不需要暴露配置，用配置覆写工具实现即可
  1. 安装开发依赖：

  npm i react-app-rewired customize-cra -D
  

  2. 项目根目录新建config-overrides.js，写入配置：

  const { override, addWebpackNode, addWebpackExternals } = require('customize-cra')
  module.exports = override(
    addWebpackNode({ fs: 'empty' }),
    addWebpackExternals(
      { './cptable': 'var cptable' },
      { './jszip': 'jszip' }
    )
  )
  

  3. 修改package.json内的启动、构建、测试命令，将原有react-scripts替换为react-app-rewired：

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

  重启开发服务即可生效。
• 已执行过eject：直接打开项目下config/webpack.config.js文件，加入查到的对应配置即可，配置文件不在根目录，在config文件夹内。

场景2：Vite 构建的React项目 #

Vite不基于webpack，不需要找webpack配置，直接修改根目录vite.config.js即可：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      fs: false,
      './cptable': 'cptable',
      './jszip': 'jszip'
    }
  }
})

场景3：从根源规避配置问题（推荐） #

react-export-excel已经多年未维护，依赖版本老旧，即使改完构建配置后续也可能出现其他兼容问题，更推荐直接替换为官方维护的、适配浏览器环境的Excel库，不需要修改任何构建配置：

• 轻量导出场景直接用xlsx（SheetJS）：
  1. 安装依赖：npm i xlsx -S
  2. 基础导出逻辑示例：

  import * as XLSX from 'xlsx'
  /**
   * 前端导出Excel
   * @param {Array} data 要导出的JSON数组数据
   * @param {string} fileName 导出文件名
   */
  const exportExcel = (data, fileName = '导出数据') => {
    const ws = XLSX.utils.json_to_sheet(data)
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, '数据表')
    XLSX.writeFile(wb, `${fileName}.xlsx`)
  }
  

• 需要自定义表格样式、复杂表头的场景，可以用exceljs，同样原生支持浏览器环境，无需额外构建配置。

补充说明：所有前端构建时出现的Can't resolve 'fs'/'path'等Node原生模块报错，本质都是构建工具误将Node端代码打包进浏览器bundle，只要配置构建工具忽略对应模块，或者使用适配浏览器端的依赖版本即可解决。

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