'RangeError: Maximum call stack size exceeded ' when run build

[hezhongfeng]

Version

3.2.1

Reproduction link

Environment info

Node 10.14.1 / npm 6.4.1 / yarn 1.12.3 / win10

Steps to reproduce

When there are too many pages, will show this error.
Then I detele some router. it build work.
All routes use lazy-load components .I have test node8.x or 10.x and --max_old_space_size

What is expected?

build normal

What is actually happening?

$ cross-env NODE_ENV=production node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build

-  Building for production...D:\example\3.2.1\node_modules\tapable\lib\HookCodeFactory.js:32
                                fn = new Function(
                                     ^

RangeError: Maximum call stack size exceeded
    at new Function (<anonymous>)
    at AsyncSeriesHookCodeFactory.create (D:\example\3.2.1\node_modules\tapable\lib\HookCodeFactory.js:32:10)
    at AsyncSeriesHook.compile (D:\example\3.2.1\node_modules\tapable\lib\AsyncSeriesHook.js:24:18)
    at AsyncSeriesHook._createCall (D:\example\3.2.1\node_modules\tapable\lib\Hook.js:24:15)
    at AsyncSeriesHook.lazyCompileHook [as callAsync] (D:\example\3.2.1\node_modules\tapable\lib\Hook.js:153:21)
    at source.tapAsync (D:\example\3.2.1\node_modules\enhanced-resolve\lib\ResultPlugin.js:16:26)
    at AsyncSeriesBailHook.eval [as callAsync] (eval at create (D:\example\3.2.1\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:7:1)
    at Resolver.doResolve (D:\example\3.2.1\node_modules\enhanced-resolve\lib\Resolver.js:235:16)
    at resolver.getHook.tapAsync (D:\example\3.2.1\node_modules\enhanced-resolve\lib\NextPlugin.js:16:13)
    at AsyncSeriesBailHook.eval [as callAsync] (eval at create (D:\example\3.2.1\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:7:1)
    at Resolver.doResolve (D:\example\3.2.1\node_modules\enhanced-resolve\lib\Resolver.js:235:16)
    at fs.stat (D:\example\3.2.1\node_modules\enhanced-resolve\lib\FileExistsPlugin.js:29:14)
    at process.nextTick (D:\example\3.2.1\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:73:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[haoqunjiang]

Please provide a reproduction.
It would be very difficult for us to debug this issue without a runnable reproduction.

[haoqunjiang]

Possible related: webpack/webpack#7731

[hezhongfeng]

@sodatea
"build-dev": "vue-cli-service build --mode=dev" This mode is Ok.But the dist isn't what I want.
And I think I use too many async components?

// HookCodeFactory.js:32
case "async":
fn = new Function(
  this.args({
    after: '_callback'
  }),
  '"use strict";\n' +
    this.header() +
    this.content({
      onError: err => `_callback(${err});\n`,
      onResult: result => `_callback(null, ${result});\n`,
      onDone: () => '_callback();\n'
    })
);

[LinusBorg]

Again: Please provide a reproduction.

When there are too many pages, will show this error.

What is "too many pages" supposed to mean?

Are you using the pages feature? Or are you referring to router views, loaded as async components?

We need code to look at and test!

[hezhongfeng]

Thanks.
@LinusBorg
I have provided a reproduction to @sodatea .

[LinusBorg]

Why not here?

[hezhongfeng]

@LinusBorg private project.When I find the reason,I will show it here.

[haoqunjiang]

Sorry for the late respondence.
Thanks for your trust. I have checked out your project on Mac but cannot reproduce it. And I haven’t got the time to try it on Windows yet. Maybe tomorrow I’ll give it a try.

[hezhongfeng]

@sodatea
I have tried build on mac and it works well.Thank you for your help.Look forward to your respondence.

[hezhongfeng]

@sodatea Do you have time to do it? Otherwise I will change some async components to sync.
@LinusBorg Have you got a win10 environment?I think I can send you through email.

[LinusBorg]

No I don't, sorry

[haoqunjiang]

Can also be fixed by setting css.extract to false.

In your reproduction there are ~180 async chunks, so there's a chance that with the corresponding css chunks added, the amount does exceed what webpack can deal with.

But it might also be related this issue that vue-loader 15 is producing too many css chunks webpack-contrib/mini-css-extract-plugin#113 I'm not yet sure what the root cause is.