yarn serve - JavaScript heap out of memory crash

[xrei]

Version

3.0.0-beta.15

Reproduction link

https://github.com/xrei/vuecli-bug

Steps to reproduce

Well.. it's not hard to reproduce but takes time.
Run yarn serve
and develop for some hours :)

What is expected?

Stable working dev server

What is actually happening?

After some hours (~1-2) dev server will crash with an error:

 95% emitting CopyPlugin
<--- Last few GCs --->

[2032:000001F314F3C8F0]  5471846 ms: Mark-sweep 1381.6 (1414.7) -> 1381.6 (1414.7) MB, 250.8 / 0.0 m
s  allocation failure GC in old space requested
[2032:000001F314F3C8F0]  5472120 ms: Mark-sweep 1381.6 (1414.7) -> 1381.6 (1413.7) MB, 273.5 / 0.0 m
s  last resort GC in old space requested
[2032:000001F314F3C8F0]  5472433 ms: Mark-sweep 1381.6 (1413.7) -> 1381.6 (1413.7) MB, 313.7 / 0.0 m
s  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 000001CC26384281]
Security context: 000002F26A1206A9 <JSObject>
    1: fromString(aka fromString) [buffer.js:349] [bytecode=0000006AEF71E081 offset=148](this=000001
3071A022E1 <undefined>,string=0000031511A4D141 <Very long string[3793765]>,encoding=000002F26A131A29
 <String[4]: utf8>)
    2: from [buffer.js:201] [bytecode=0000006AEF71DC01 offset=11](this=0000023CE59638A9 <JSFunction
Buffer (sfi = 0000037B38A8B959)>,val...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::DecodeWrite
 2: node_module_register
 3: v8::internal::FatalProcessOutOfMemory
 4: v8::internal::FatalProcessOutOfMemory
 5: v8::internal::Heap::MaxHeapGrowingFactor
 6: v8::internal::Factory::NewRawTwoByteString
 7: v8::internal::Smi::SmiPrint
 8: unibrow::Utf8DecoderBase::WriteUtf16Slow
 9: v8::String::WriteUtf8
10: std::basic_ostream<char,std::char_traits<char> >::basic_ostream<char,std::char_traits<char> >
11: node::Buffer::New
12: node::Buffer::New
13: v8::internal::interpreter::BytecodeDecoder::Decode
14: v8::internal::RegExpImpl::Exec
15: v8::internal::RegExpImpl::Exec
16: v8::internal::RegExpImpl::Exec
17: 000001CC26384281
error Command failed with exit code 134.

[ryouaki]

change the scripts at package.json as below
node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve --open

[ryouaki]

this is not an issue from vue-cli ,this is the limit from nodejs.

[yyx990803]

There's nothing vue-cli can do about this.

[atinybeardedman]

Just in case anyone else finds this issue I had to change the package.json serve script to the following:

"serve" : "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service serve --open"

@ryouaki your path didn't work for me

[xrei]

"dev": "npx --max_old_space_size=4096 vue-cli-service serve"

@atinybeardedman this worked for me

but just wanna say, that my own webpack config doesn't have this issue with memory
also i'm sure i have enough memory. just strange behaviour.
maybe it's because of webpack 4. I don't know.

[ryouaki]

@xrei this is because of your code. for me , in my project , i have more than 500 pages and more 100 base components , and with a large assets and css with cssmodule.
some bad practice with cssmodule from junior developer , this will take large memory. ( ´▽｀)

[ryouaki]

@atinybeardedman you should change the path to you own path which you saved the vue-cli scripts.

[octref]

@yyx990803 You can fix this by adding --max_old_space_size=4096 to the hashbang of cli-service.

I only had a small project that I developed for 3 hours, and this happened for at least 5 times. I feel a lot of people might run into this issue.

Root cause is here: webpack/webpack#1914 (comment). From what I read in the thread, it seems to be that the memory usage from sourcemap generation & file watching hits V8's limit (1400MB). Bumping the limit to 4GB should make the ceiling much harder to hit.

[yyx990803]

@octref we can do that for now. Although in the long run we probably want to see if there's anything we can do to reduce the heap usage. I think it's because a single Vue file actually involves multiple source maps being passed and merged.

[chokn]

Adding a directory of large library files to my project's .eslintignore file fixed the issue for me.

[vanderlin]

I get this crash after about 10 saves and webpack tries to compile.