Angular 12构建报RangeError: Maximum call stack size exceeded错误如何处理

Generating browser application bundles (phase: building).../home/jde/edApp2Angular12/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamChunksOfSourceMap.js:21
        const lines = source.match(SPLIT_LINES_REGEX);
                             ^

RangeError: Maximum call stack size exceeded
    at String.match (<anonymous>)
    at streamChunksOfSourceMapFull (/home/jde/edApp2Angular12/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamChunksOfSourceMap.js:21:23)
    at module.exports (/home/jde/edApp2Angular12/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamChunksOfSourceMap.js:389:6)
    at SourceMapSource.streamChunks (/home/jde/edApp2Angular12/node_modules/webpack/node_modules/webpack-sources/lib/SourceMapSource.js:211:11)
    at module.exports (/home/jde/edApp2Angular12/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamChunks.js:13:17)
    at ReplaceSource.streamChunks (/home/jde/edApp2Angular12/node_modules/webpack/node_modules/webpack-sources/lib/ReplaceSource.js:176:44)
    at module.exports (/home/jde/edApp2Angular12/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamChunks.js:13:17)
    at streamAndGetSourceAndMap (/home/jde/edApp2Angular12/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamAndGetSourceAndMap.js:27:53)
    at CachedSource.streamChunks (/home/jde/edApp2Angular12/node_modules/webpack/node_modules/webpack-sources/lib/CachedSource.js:208:35)
    at module.exports (/home/jde/edApp2Angular12/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamChunks.js:13:17)

问题定位方法 #

• 先排除业务代码问题：关闭sourcemap后AOT模式可正常编译，首先可以排除业务代码存在无限循环的可能——如果是业务代码逻辑问题，关闭sourcemap后运行时仍然会触发栈溢出，不会仅在构建阶段报错。
• 确认依赖bug：该报错出现在webpack-sources库处理sourcemap的阶段，是webpack 5.47.1对应版本的webpack-sources的已知问题，触发原因是库中用于拆分源文件行的正则表达式在处理包含超长行的源文件时，递归深度超过JS调用栈上限。你可以通过以下操作快速确认：修改angular.json中build配置的sourceMap字段为false，执行ng build --aot，如果编译正常即可100%确认是该依赖bug导致。

后续处理方案 #

临时规避 #

如果生产环境不需要保留sourcemap用于调试，直接在angular.json的构建配置中关闭sourcemap即可正常构建，不需要修改其他依赖。

永久修复 #

1. 固定webpack-sources版本：在package.json中添加强制版本配置，将webpack-sources锁定到已修复该问题的3.2.3及以上版本：
   • 如果你使用npm 8.3及以上版本，在package.json中添加overrides字段：

   "overrides": {
     "webpack-sources": "^3.2.3"
   }
   

   • 如果你使用yarn，在package.json中添加resolutions字段：

   "resolutions": {
     "webpack-sources": "^3.2.3"
   }
   

   配置完成后删除node_modules和lock文件重新安装依赖即可。
2. 升级Angular版本：如果项目兼容更高版本，可将Angular升级到13.0及以上版本，对应依赖的webpack及相关子包都会同步升级，自动解决该问题。

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