webpack-sources: "Maximum call stack size exceeded" in streamChunks*

Using storybook with webpack5 we recently ended up getting “Maximum call stack size exceeded” when we try to build the storybook project.

    RangeError: Maximum call stack size exceeded
    at String.match (<anonymous>)
    at streamChunksOfRawSource (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunksOfRawSource.js:14:25)
    at module.exports (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunksOfRawSource.js:40:5)
    at RawSource.streamChunks (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\RawSource.js:56:10)
    at module.exports (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunks.js:13:17)
    at streamAndGetSourceAndMap (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamAndGetSourceAndMap.js:27:53)
    at CachedSource.streamChunks (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\CachedSource.js:208:35)
    at module.exports (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunks.js:13:17)
    at ReplaceSource.streamChunks (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\ReplaceSource.js:176:44)
    at module.exports (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunks.js:13:17)
    at ConcatSource.streamChunks (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\ConcatSource.js:112:55)
    at module.exports (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunks.js:13:17)
    at streamAndGetSourceAndMap (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamAndGetSourceAndMap.js:27:53)
    at CachedSource.streamChunks (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\CachedSource.js:208:35)
    at module.exports (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunks.js:13:17)
    at ConcatSource.streamChunks (C:\src\node_modules\webpack\node_modules\webpack-sources\lib\ConcatSource.js:112:55)

It seems to be caused by the regex used for the match. I have seen it in two different spots. The other one was:

UnhandledPromiseRejectionWarning: RangeError: Maximum call stack size exceeded
    at String.match (<anonymous>)
    at streamChunksOfSourceMapLinesFull (\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunksOfSourceMap.js:167:23)
    at module.exports (\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunksOfSourceMap.js:405:6)
    at nameIndexMapping.<computed> (\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunksOfCombinedSourceMap.js:271:5)
    at streamChunksOfSourceMapLinesFinal (\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunksOfSourceMap.js:331:3)
    at module.exports (\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunksOfSourceMap.js:398:6)
    at streamChunksOfCombinedSourceMap (\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunksOfCombinedSourceMap.js:54:9)
    at SourceMapSource.streamChunks (\node_modules\webpack\node_modules\webpack-sources\lib\SourceMapSource.js:197:11)
    at exports.getSourceAndMap (\node_modules\webpack\node_modules\webpack-sources\lib\helpers\getFromStreamChunks.js:17:33)
    at SourceMapSource.sourceAndMap (\node_modules\webpack\node_modules\webpack-sources\lib\SourceMapSource.js:188:10)
    at getTaskForFile (\node_modules\webpack\lib\SourceMapDevToolPlugin.js:84:30)
    at \node_modules\webpack\lib\SourceMapDevToolPlugin.js:272:22
    at \node_modules\webpack\lib\Cache.js:93:5
    at Hook.eval [as callAsync] (eval at create (\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Cache.get (\node_modules\webpack\lib\Cache.js:75:18)
    at ItemCacheFacade.get (\node_modules\webpack\lib\CacheFacade.js:117:15)

At first I thought it might be cause of a big chunk and source file but I tried to output “source” prior to the “source.match” and it seems to only contain:

/* module decorator */ module = __webpack_require__.hmd(module);\n

I’m not sure how to create a reproducable way for that issues however it vanishes when downgrading to webpack ~5.46.0 and whenever I upgrade back to ~5.47.0 the error reappears.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 1
  • Comments: 110 (46 by maintainers)

Commits related to this issue

Most upvoted comments

Great! I think we can close it, if somebody faced with this again, please open an issue, hope we fixed all edge cases, feel free to feedback

I have good news, reproduced locally, but here same problem:

TypeError: source.match is not a function

      at streamChunksOfRawSource (node_modules/webpack-sources/lib/helpers/streamChunksOfRawSource.js:15:25)
      at Object.<anonymous>.module.exports (node_modules/webpack-sources/lib/helpers/streamChunksOfRawSource.js:40:9)
      at RawSource.streamChunks (node_modules/webpack-sources/lib/RawSource.js:56:10)
      at Object.<anonymous>.module.exports (node_modules/webpack-sources/lib/helpers/streamChunks.js:13:17)
      at ConcatSource.streamChunks (node_modules/webpack-sources/lib/ConcatSource.js:112:55)
      at Object.<anonymous>.exports.getSourceAndMap (node_modules/webpack-sources/lib/helpers/getFromStreamChunks.js:17:33)
      at ConcatSource.sourceAndMap (node_modules/webpack-sources/lib/ConcatSource.js:94:10)
      at getTaskForFile (node_modules/webpack/lib/SourceMapDevToolPlugin.js:84:30)
      at node_modules/webpack/lib/SourceMapDevToolPlugin.js:272:22
      at node_modules/webpack/lib/Cache.js:93:5

Will try to do minimum reproducible test repo in near future, also found another bug 😄 Spent ~2 hours 😞

Let’s not forget we’re here in the issues of webpack-sources, we may want to find the related issue mentioned in Angular’s repository and continue this discussion and exchange of experiences there. Not having a reproduction makes it incredibly hard to determine if this issue is with Angular or with Webpack, or in the middle of both.

May I recommend we use https://github.com/angular/angular-cli/issues/21599 this one for the time being? Of course we can combine our knowledge and experiences to try and get to a reproduction of the problem. If this then turns out to be more Webpack related, at least then we bring the information back here.

Spiffy. Glad I could help and looking forward to removing my hack 😃 Thanks.

@alexander-akait @Bjeaurn It worked! Thank you both!

@Bjeaurn Yep, we still investigate this, I am busy on today/tomorrow and then return to this again

Sure thing. Running with that, I got a private logs file available for you. Let me do that as well.

Any Node.js version and 3.2.0

v12.20.1

Running the same procedure now with v14.17.0. Looks like on 14.17 the package resolving works a bit differently, I’m struggling to get the right 3.2.0 version of webpack-sources to be used because of the complicated dependencies as we saw earlier in this thread.

I’ll take a deeper look if required 😃.

Good catch, we need to look at this deeply, I think we found a place with the problem, pinned, will finish one job and return to this (today, in near future)

I messaged you privately about that. In the meanwhile, I think I found a thing!

So I added a bunch of logs to give me an idea what’s going on and where it’s breaking. I made screenshots for your enjoyment.

I ran into a very long file that had it’s sourceMapping inlined, which is where it seemed to break at. This file is an external plugin called survey-angular which seems to consume SurveyJS. Weirdly enough, I can find no usage of the plugin in our actual application, it’s also not in the package.json as a listed dependency. But when I do npm uninstall survey-angular the app won’t compile/build anymore. I’ll dive into this separately.

Screenshot 2021-09-10 at 13 45 54

So this is the start of that, you can see some of my logging around it.

Screenshot 2021-09-10 at 13 48 13

You can see the start of the inlined sourceMap for this plugin.

Screenshot 2021-09-10 at 13 48 38

And here’s the end of it where it breaks.

I went into the plugin and removed the inlined sourceMap; now the build succeeds!

What this means exactly for webpack-sources I find a little hard to judge. It might be adding a detection for inlined sourceMaps and shortcircuiting the streamChunks? @alexander-akait

I could probably get that sorted, stand by!

So it doesn’t appear to be related to webpack-subresource-integrity and license-webpack-plugin.

Tip: if you think that this is caused by an outdated plugin, you can use yarn resolutions to confirm if it was fixed in a newer version.

https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

To disable the license-webpack-plugin you can run ng build with the --no-extract-licenses argument.

Docs: https://angular.io/cli/build

/cc @alan-agius4 maybe you can help here

Yeah the problem here might be that both webpack-subresource-integrity and license-webpack-plugin depend on an older version, so they just may need to be updated. This already might’ve been done in the Angular repo, so I’ll check that commit (and link it here).

You mean API broken as in the libraries that have Webpack as a devDependency?

Yes

Same with webpack 5.51.1

RangeError: Maximum call stack size exceeded
    at String.match (<anonymous>)
    at streamChunksOfSourceMapFull (D:\dev\projectname\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunksOfSourceMap.js:21:23)
    at module.exports (D:\dev\projectname\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunksOfSourceMap.js:389:6)
    at nameIndexMapping.<computed> (D:\dev\projectname\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunksOfCombinedSourceMap.js:271:5)
    at streamChunksOfSourceMapFinal (D:\dev\projectname\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunksOfSourceMap.js:265:3)
    at module.exports (D:\dev\projectname\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunksOfSourceMap.js:382:6)
    at streamChunksOfCombinedSourceMap (D:\dev\projectname\src\node_modules\webpack\node_modules\webpack-sources\lib\helpers\streamChunksOfCombinedSourceMap.js:54:9)
    at SourceMapSource.streamChunks (D:\dev\projectname\src\node_modules\webpack\node_modules\webpack-sources\lib\SourceMapSource.js:197:11)
js:17:33)
    at SourceMapSource.sourceAndMap (D:\dev\projectname\src\node_modules\webpack\node_modules\webpack-sources\lib\SourceMapSource.js:188:10)

Absolutely!

Maximum call stack size exceeded
HookWebpackError: Maximum call stack size exceeded
    at makeWebpackError (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/lib/HookWebpackError.js:48:9)
    at /Users/bjorn/Dev/clientapp/src/node_modules/webpack/lib/Compilation.js:2515:12
    at eval (eval at create (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:114:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
-- inner error --
RangeError: Maximum call stack size exceeded
    at String.match (<anonymous>)
    at streamChunksOfRawSource (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamChunksOfRawSource.js:14:25)
    at module.exports (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamChunksOfRawSource.js:40:5)
    at RawSource.streamChunks (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/RawSource.js:56:10)
    at module.exports (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamChunks.js:13:17)
    at ReplaceSource.streamChunks (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/ReplaceSource.js:176:44)
    at module.exports (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamChunks.js:13:17)
    at streamAndGetSourceAndMap (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamAndGetSourceAndMap.js:27:53)
    at CachedSource.streamChunks (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/CachedSource.js:208:35)
    at module.exports (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamChunks.js:13:17)
    at ConcatSource.streamChunks (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/ConcatSource.js:112:55)
    at module.exports (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamChunks.js:13:17)
    at streamAndGetSourceAndMap (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamAndGetSourceAndMap.js:27:53)
    at CachedSource.streamChunks (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/CachedSource.js:208:35)
    at module.exports (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamChunks.js:13:17)
    at ConcatSource.streamChunks (/Users/bjorn/Dev/clientapp/src/node_modules/webpack/node_modules/webpack-sources/lib/ConcatSource.js:112:55)

Unless it’s related to ng-packagr. I will try upgrading only that in our codebase and checking if it happens or not.

I think I have time today. I’m not familiar with the angular stress-test project but I’m sure I can find it. I’ll take a stab at it and let you know.

Unfortunately it’s a private repository and I won’t be able to.

We can always try to use the angular stress-test project, it might be big enough. Work is a bit hectic right now, I’ll try to set it up in a few days.

If anyone else wants to attempt it, I just know that updating to the latest Angular CLI version is what caused this. Reverting to 12.0.5 fixed it.