Nuxt.js: Memory leak in dev mode using Vuetify

[bubundas17]

Version

v2.9.2

Steps to reproduce

Just install dependencies and run yarn dev and open the URL in browser, Refresh the page couple of time, or wait for couple of seconds.

The dev server should crash because of out of memory error.

What is expected ?

Just run it as dev,
and wait for a couple of seconds. and also observe Memory use.
After a couple of seconds of running the dev server, You'll see the following error:

<--- Last few GCs --->
io[3240:0x39a8ba0]    42966 ms: Mark-sweep 2048.2 (2066.7) -> 2047.0 (2069.7) MB, 1503.6 / 0.0 ms  (+ 0.4 ms in 84 steps since start of marking, biggest step 0.0 ms, walltim
e since start of marking 1530 ms) (average mu = 0.093, current mu = 0.019) allocatio[3240:0x39a8ba0]    44333 ms: Mark-sweep 2048.0 (2069.7) -> 2047.3 (2066.4) MB, 1310.0 /
0.0 ms  (+ 49.4 ms in 13 steps since start of marking, biggest step 12.2 ms, walltime since start of marking 1365 ms) (average mu = 0.050, current mu = 0.006) allocat

<--- JS stacktrace --->

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

    0: ExitFrame [pc: 0x134f099]
Security context: 0x07b2c2280919 <JSObject>
    1: initWatch(aka initWatch) [0x16ed90488ee1] [/mnt/c/Users/bubun/Projects/atozserver-frontend/node_modules/vue/dist/vue.runtime.common.dev.js:~4857] [pc=0x153fc64d0368](
this=0x048065cc04d1 <undefined>,0x08a4b4084cb1 <VueComponent map = 0x3fd21b3e7fa9>,0x2915237fb701 <Object map = 0x90642dbd679>)
    2: initState(aka initState) [0x16ed90488c81] [/mnt/c/Users/b...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Writing Node.js report to file: report.20190928.210549.3240.0.001.json
Node.js report completed
 1: 0x9bcac0 node::Abort() [/usr/bin/node]
 2: 0x9bdc56 node::OnFatalError(char const*, char const*) [/usr/bin/node]
 3: 0xb18eee v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/bin/node]
 4: 0xb19269 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/bin/node]
 5: 0xccab45  [/usr/bin/node]
 6: 0xccb1b6 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/bin/node]
 7: 0xcd69ea v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/bin/node]
 8: 0xcd78f5 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/bin/node]
 9: 0xcda3b8 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [/usr/bin/node]
10: 0xca1ee7 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType) [/usr/bin/node]
11: 0xfca050 v8::internal::Runtime_AllocateInOldGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/bin/node]
12: 0x134f099  [/usr/bin/node]
Aborted (core dumped)
error Command failed with exit code 134.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

What is actually happening?

The dev server taking too much memory and it is exceding

How to Solve?

thanks to @aldarund adding

export default {
  build: {
    standalone: true,
 }
}

to nuxt config file seems to solve the issue.

ref: #5452

Thank you guys for helping, and making Nuxt great.

and also I am making the git repo private because I am not intending to release the completed template to the public.

_{This bug report is available on Nuxt community (#c9831)}

[manniL]

Does this happen in the prod build as well? I don't think so, right?

[bubundas17]

Does this happen in the prod build as well? I don't think so, right?

Nope, It does not happen in proud. But it is making the development process very annoying.

[manniL]

@bubundas17 I agree!

Could you try to boil the issue down to the "root cause"? E.g. which plugin/module/code part causes the issue.

Knowing which part causes the issue will make it easier for us to fix the problem.

[bubundas17]

@bubundas17 I agree!

Could you try to boil the issue down to the "root cause"? E.g. which plugin/module/code part causes the issue.

Knowing which part causes the issue will make it easier for us to fix the problem.

Actually I tried to enabling/disabling plugins by commenting them out. But the Issue Seems to persist.

Also tried to upgrading/downgrading NUXT, But still no lick. It seems very weird to me.

[manniL]

It doesn't happen with a fresh nuxt installation though. So maybe start from there and add bits and pieces?

[bubundas17]

@manniL Ok, Will try that and also try to recreate the issue.

[bubundas17]

Well @manniL It is very weird, I have done a couple of other projects with using same nuxt plugins before. But I didn't get this kind of errors before. Also, I recreated a new Next Project and tried to recreate the issue. but it didn't work. And there is not that much logic involved in the components which I have created which I think can cause this kind of problem.
At this point, I am feeling kinda lost.

[manniL]

Sounds like a caching issue. Switch the port, clean cache + service workers and so on.

From the current point it doesn't sound reproducible though :|

[bubundas17]

Sounds like a caching issue. Switch the port, clean cache + service workers and so on.

From the current point it doesn't sound reproducible though :|

@manniL can you clone the repo and tell if the same issue occurring with you aswell?

[aldarund]

try add standalone: true into nuxt.config build, it should fix possible memory leaks

[bubundas17]

@aldarund Where to add this? In nuxt config?

[aldarund]

@bubundas17 yes.

export default {
  build: {
    standalone: true,
 }
}

[bubundas17]

@bubundas17 yes.

export default {
  build: {
    standalone: true,
 }
}

Thank you so much! The issue seems to be gone after doing this. but @aldarund What it does in the backend? and why the issue happening.

[aldarund]

@bubundas17 https://github.com/nuxt/nuxt.js/pull/5452

[bubundas17]

@aldarund Thank you so much! The issue seems to be solved!

[souljorje]

@aldarund what does standalone stay for?

[wildan2711]

Hi guys, I had this issue as well when using vuetify, tried the build.standalone: true solution, but since I'm also using the nuxt apollo module, I am getting

Network error: AbortController is not a constructor

Any ideas?

[wildan2711]

After using a debugger, I found that if you're using the @nuxtjs/apollo module on standalone mode, you would need to add if
config.externals = ['apollo-link-http-common'] on build.extend

export default {
  build: {
    standalone: true,
    extend(config, ctx) {
      if (ctx.isDev && ctx.isServer) {
        config.externals = ['apollo-link-http-common']
      }
    },
  },
}

Hope this helps someone else.