React CRA构建报错：Terser触发Maximum call stack size exceeded

问题详情 #

基于CoreUI模板的React CRA项目，执行npm run build时突然触发Terser压缩栈溢出错误，完整报错信息如下：

Failed to compile.

Failed to minify the bundle. Error: static/js/5.d8dbe471.chunk.js from Terser
RangeError: Maximum call stack size exceeded
    at C:\Users\aaa\playground\web\payback_reactjs\node_modules\react-scripts\scripts\build.js:188:23
    at finalCallback (C:\Users\aaa\playground\web\payback_reactjs\node_modules\webpack\lib\Compiler.js:257:39)
    at C:\Users\aaa\playground\web\payback_reactjs\node_modules\webpack\lib\Compiler.js:273:13
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\aaa\playground\web\payback_reactjs\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\aaa\playground\web\payback_reactjs\node_modules\tapable\lib\Hook.js:154:20)
    at onCompiled (C:\Users\aaa\playground\web\payback_reactjs\node_modules\webpack\lib\Compiler.js:271:21)
    at C:\Users\aaa\playground\web\payback_reactjs\node_modules\webpack\lib\Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\aaa\playground\web\payback_reactjs\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\aaa\playground\web\payback_reactjs\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\aaa\playground\web\payback_reactjs\node_modules\webpack\lib\Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\aaa\playground\web\payback_reactjs\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\aaa\playground\web\payback_reactjs\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\aaa\playground\web\payback_reactjs\node_modules\webpack\lib\Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\aaa\playground\web\payback_reactjs\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\aaa\playground\web\payback_reactjs\node_modules\tapable\lib\Hook.js:154:20)
    at C:\Users\aaa\playground\web\payback_reactjs\node_modules\webpack\lib\Compilation.js:1414:32
    at eval (eval at create (C:\Users\aaa\playground\web\payback_reactjs\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:12:1)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
Read more here: https://cra.link/failed-to-minify

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @coreui/coreui-free-react-admin-template@3.2.1 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @coreui/coreui-free-react-admin-template@3.2.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\aaa\AppData\Roaming\npm-cache\_logs\2023-06-22T09_22_26_405Z-debug.log

环境参数：

• Node版本：v12.21.0
• NPM版本：6.14.11
• Terser版本：^5.14.2

已尝试无效的操作：

• 删除node_modules和package-lock.json后重新安装依赖
• 切换使用Yarn管理依赖
• 设置NODE_OPTIONS=--max_old_space_size=4096增加内存
• 回退至之前可正常构建的Git提交版本

可行解决方案 #

1. 锁定Terser到兼容稳定版本 #

Terser 5.14.x部分版本存在处理特定代码结构时的栈溢出bug，降级到5.10.0版本可解决：

• 修改package.json中Terser版本为"terser": "5.10.0"
• 执行npm install重新安装依赖
• 再次运行npm run build

2. 排查代码中的循环引用/无限递归 #

虽然回退旧提交仍报错，但可能存在隐性循环引用（模块间、对象间）或组件无限渲染逻辑：

• 根据报错中的static/js/5.d8dbe471.chunk.js定位对应源码模块，检查是否存在无限递归函数、组件死循环
• 执行npm run build -- --verbose开启webpack详细日志，定位Terser处理时触发溢出的具体文件

3. 升级React-scripts适配Terser #

旧版react-scripts与新版Terser可能存在配置冲突，升级到对应CRA 3.x的稳定版：

• 执行npm install react-scripts@3.4.4（适配CoreUI 3.2.1的最新兼容版本）
• 清除项目build文件夹后重新构建

4. 临时跳过Terser压缩（仅用于排查） #

若需临时获取构建产物，可修改build命令跳过压缩：

• 修改package.json的build脚本为："build": "react-scripts build --no-minify"
• 注意：此方法仅用于排查，生产环境禁止使用未压缩代码

5. 清理全局缓存与临时文件 #

全局缓存或残留临时文件可能导致异常：

• 执行npm cache clean --force清理npm全局缓存
• 删除项目根目录下的build文件夹
• 重启终端后重新执行构建

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