React项目npm run build编译失败：Maximum call stack size exceeded

问题详情 #

执行npm run build构建生产环境包时失败，报错提示「调用栈大小超出限制」。已尝试以下方案但未解决：

• 在package.json的build脚本中添加--max_old_space_size=4096增大Node堆内存
• 删除node_modules、清理npm缓存后重新安装依赖

注意：项目在开发模式下运行完全正常，无任何报错。
Node版本：v14.17.3，npm版本：6.14.13

构建报错信息 #

正在创建优化的生产构建...
编译失败。

调用栈大小超出限制


npm ERR! 代码 ELIFECYCLE
npm ERR! 错误码 1
npm ERR! my-app@0.1.0 build: `react-scripts build`
npm ERR! 退出状态 1
npm ERR!
npm ERR! my-app@0.1.0的build脚本执行失败。
npm ERR! 这大概率不是npm的问题，上方可能有更多日志输出。

npm ERR! 本次运行的完整日志可查看：
npm ERR!     C:\Users\MySystem\AppData\Roaming\npm-cache\_logs\2022-09-08T10_32_42_442Z-debug.log

npm完整日志内容 #

日志路径：C:\Users\MySystem\AppData\Roaming\npm-cache_logs\2022-09-08T10_32_42_442Z-debug.log

0 info 运行完成时会显示ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info 使用npm@6.14.13
3 info 使用node@v14.17.3
4 verbose 运行脚本序列：['prebuild', 'build', 'postbuild']
5 info lifecycle my-app@0.1.0~prebuild: my-app@0.1.0
6 info lifecycle my-app@0.1.0~build: my-app@0.1.0
7 verbose lifecycle my-app@0.1.0~build: 生命周期脚本允许无权限执行
8 verbose lifecycle my-app@0.1.0~build: PATH环境变量：C:\Users\MySystem\AppData\Roaming\nvm\v14.17.3\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\MySystem\Documents\project\televisit-main\node_modules\.bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\150\Tools\Binn\;C:\Program Files\Microsoft SQL Server\150\Tools\Binn\;C:\Program Files\Microsoft SQL Server\150\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\150\DTS\Binn\;C:\Program Files\Azure Data Studio\bin;C:\Users\MySystem\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Program Files\Docker\Docker\resources\bin;C:\ProgramData\DockerDesktop\version-bin;C:\Users\MySystem\AppData\Local\Microsoft\WindowsApps;C:\Users\MySystem\AppData\Roaming\npm;C:\Users\MySystem\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\MySystem\AppData\Local\GitHubDesktop\bin;C:\Program Files\JetBrains\WebStorm 2022.1\bin;;C:\Program Files\Azure Data Studio\bin;C:\Users\MySystem\AppData\Roaming\nvm;C:\Program Files\nodejs
9 verbose lifecycle my-app@0.1.0~build: 当前工作目录：C:\Users\MySystem\Documents\project\televisit-main
10 silly lifecycle my-app@0.1.0~build: 执行参数：['/d /s /c', 'react-scripts build']
11 silly lifecycle my-app@0.1.0~build: 返回结果：代码1，无信号
12 info lifecycle my-app@0.1.0~build: build脚本执行失败
13 verbose stack 错误：my-app@0.1.0 build: `react-scripts build`
13 verbose stack 退出状态1
13 verbose stack     在EventEmitter.<anonymous> (C:\Users\MySystem\AppData\Roaming\nvm\v14.17.3\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     在EventEmitter.emit (events.js:375:28)
13 verbose stack     在ChildProcess.<anonymous> (C:\Users\MySystem\AppData\Roaming\nvm\v14.17.3\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     在ChildProcess.emit (events.js:375:28)
13 verbose stack     在maybeClose (internal/child_process.js:1055:16)
13 verbose stack     在Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose 包ID my-app@0.1.0
15 verbose 当前工作目录 C:\Users\MySystem\Documents\project\televisit-main
16 verbose 系统 Windows_NT 10.0.19042
17 verbose 命令行参数 "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node版本 v14.17.3
19 verbose npm版本 v6.14.13
20 error 代码 ELIFECYCLE
21 error 错误码1
22 error my-app@0.1.0 build: `react-scripts build`
22 error 退出状态1
23 error my-app@0.1.0的build脚本执行失败。
23 error 这大概率不是npm的问题，上方可能有更多日志输出。
24 verbose 退出 [1, true]

排查方向 #

• 找无限递归代码：开发模式下React的宽松编译可能没触发报错，生产构建的严格优化会暴露问题。重点查：
  • 自定义Hook里有没有无限调用自身的逻辑
  • 组件render方法中是否存在循环更新state的情况
  • 高阶组件或HOC是否出现循环引用
• 排查第三方依赖：最近新增的依赖可能在生产构建时引发递归问题，临时移除后重新构建试试
• 调整CRA配置：如果是Create React App项目，可以执行eject后修改webpack配置，开启更详细的编译日志，定位具体出问题的模块
• 升级Node版本：尝试升级到v16 LTS版本，可能修复底层的内存或递归处理bug

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