React项目执行yarn build编译失败，寻求解决方案

环境信息 #

• React版本：17.0.2
• react-scripts版本：4.0.3
• yarn版本：1.22.17

执行命令 #

app-frontend\App>yarn build

命令输出与错误详情 #

yarn run v1.22.17
$ react-app-rewired build
Creating an optimized production build...
Failed to compile.

错误核心信息：

./node_modules/tempa-xlsx/node_modules/pako/lib/zlib/trees.js 237:106
Module parse failed: Unexpected token (237:106)
已使用以下加载器处理文件：

• ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
  可能需要额外加载器处理加载器输出结果。

相关代码片段：

function gen_bitlen(s, desc) /*    deflate_state *s;*/ /*    tree_desc *desc;    /* the tree descriptor */ */{
|   var tree = desc.dyn_tree;
|   var max_code = desc.max_code;

最终错误提示：

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run 获取命令文档。

已尝试的无效操作 #

• 将react-scripts从3.4.4升级至4.0.3
• 删除node_modules后重新执行yarn install和yarn build

可行解决方案 #

方案1：配置react-app-rewired让Babel处理pako依赖 #

在项目根目录的config-overrides.js中添加以下配置，让babel-loader处理node_modules里的pako库：

const { override, addBabelLoader } = require('customize-cra');

module.exports = override(
  addBabelLoader({
    test: /\.js$/,
    include: /node_modules\/pako/,
  })
);

方案2：升级或替换依赖库 #

• 尝试升级tempa-xlsx到最新版本，确认是否已修复依赖的pako兼容性问题
• 如果业务允许，考虑将tempa-xlsx替换为更主流的xlsx库，降低兼容性风险

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