React引入react-export-excel后maybeAddMapping非函数报错排查

• 触发场景：React项目开发对象数组导出Excel功能，安装引入react-export-excel依赖后，项目无法正常编译
• 报错特征：共出现2处内容相似、仅路径前缀不同的报错信息
  • babel-loader处理src/pages/cv-list/list/list.js文件时抛出类型错误：TypeError: (0 , _genMapping.maybeAddMapping) is not a function
  • 错误调用栈指向node_modules目录下@babel/generator包的source-map处理逻辑，最终返回编译失败结果

该报错属于典型的babel多版本依赖API不兼容问题：
react-export-excel包已停止维护多年，其依赖的是旧版本@babel/generator，该旧版本代码中会调用maybeAddMapping方法；但项目本地安装的新版babel构建链路中，@jridgewell/gen-mapping、@babel/generator的模块导出逻辑已经变更，多版本babel依赖在node_modules中共存时，模块解析逻辑错误加载了不匹配的依赖文件，最终触发目标函数不存在的类型错误。

• 优先方案：替换废弃依赖
  直接移除长期无维护的react-export-excel，改用社区维护状态正常的工具组合实现Excel导出，从根源规避老旧依赖带来的连锁兼容性问题，以xlsx+file-saver组合为例：
  1. 安装依赖

  npm uninstall react-export-excel
  npm install xlsx file-saver
  

  2. 封装通用导出方法

  import * as XLSX from 'xlsx';
  import { saveAs } from 'file-saver';
  
  /**
   * 导出对象数组为Excel文件
   * @param {Array} list 待导出的对象数组
   * @param {string} fileName 导出文件名
   * @param {string} sheetName 工作表名称
   */
  const exportExcel = (list, fileName = '导出数据', sheetName = 'Sheet1') => {
    const worksheet = XLSX.utils.json_to_sheet(list);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
    const fileBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    const fileBlob = new Blob([fileBuffer], { type: 'application/octet-stream' });
    saveAs(fileBlob, `${fileName}.xlsx`);
  };
  
  export default exportExcel;
  

• 临时兼容方案：强制对齐babel依赖版本
  如果短期内无法替换react-export-excel，可以通过包管理器的版本强制覆盖功能，统一项目内所有依赖引用的@babel/generator、@jridgewell/gen-mapping版本，解决API不匹配问题：
  1. npm 8.3及以上版本，在package.json中添加overrides配置：

  {
    "overrides": {
      "@babel/generator": "^7.23.6",
      "@jridgewell/gen-mapping": "^0.3.3"
    }
  }
  

  2. yarn用户在package.json中添加resolutions配置：

  {
    "resolutions": {
      "@babel/generator": "^7.23.6",
      "@jridgewell/gen-mapping": "^0.3.3"
    }
  }
  

  配置完成后，删除node_modules目录和对应锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行npm install/yarn install安装依赖后重启项目即可。

提示：react-export-excel最后一次正式版本发布于2020年，后续不会跟进依赖兼容、安全漏洞修复，长期项目不建议继续使用。

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