JavaScript heap out of memory only when serving via Vue UI ( --dashboard argument causes issue )

douglasg14b commented 2 years ago

Version

4.5.12

Environment info

Environment Info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (12) ia32 AMD Ryzen 5 5600X 6-Core Processor
  Binaries:
    Node: 14.18.2 - C:\Program Files (x86)\nodejs\node.EXE        
    Yarn: Not Found
    npm: 6.14.15 - C:\Program Files (x86)\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.55)      
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.1.0
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.13
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4      
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.13
    @vue/cli-plugin-babel: ^4.5.13 => 4.5.13
    @vue/cli-plugin-eslint: ^4.5.14 => 4.5.14
    @vue/cli-plugin-router:  4.5.13
    @vue/cli-plugin-typescript: ^4.5.15 => 4.5.15
    @vue/cli-plugin-unit-jest: ^4.5.13 => 4.5.13
    @vue/cli-plugin-vuex:  4.5.13
    @vue/cli-service: ^4.5.13 => 4.5.13
    @vue/cli-shared-utils:  4.5.13 (4.5.14, 4.5.15)
    @vue/component-compiler-utils: ~2.6.0 => 2.6.0 (3.2.2)        
    @vue/eslint-config-standard: ^5.1.2 => 5.1.2
    @vue/eslint-config-typescript: ^9.1.0 => 9.1.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/test-utils: ^1.0.0-beta.30 => 1.0.0-beta.30
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^8.0.1 => 8.0.1 (7.20.0)
    eslint-plugin-vuetify: ^1.1.0 => 1.1.0
    jest-serializer-vue: ^2.0.2 => 2.0.2
    portal-vue: ^2.1.7 => 2.1.7
    typescript: ^4.5.4 => 4.5.4
    vue: 2.6.14 => 2.6.14
    vue-analytics: ^5.12.3 => 5.16.2
    vue-apollo: ^3.0.5 => 3.0.5
    vue-chartjs: ^3.3.1 => 3.4.0
    vue-cli-plugin-vuetify: ^2.4.3 => 2.4.3
    vue-clipboard2: ^0.2.1 => 0.2.1
    vue-eslint-parser:  7.11.0 (8.0.1)
    vue-hot-reload-api:  2.3.4
    vue-input-facade: ^1.3.7 => 1.3.7
    vue-jest: ^3.0.5 => 3.0.5
    vue-loader: ^15.9.8 => 15.9.8 (16.8.2)
    vue-router: 3.5.3 => 3.5.3
    vue-style-loader:  4.1.3
    vue-template-compiler: 2.6.14 => 2.6.14
    vue-template-es2015-compiler:  1.9.1
    vue2-dropzone: ^3.5.2 => 3.5.2
    vue2-google-maps: ^0.9.6 => 0.9.8
    vuetify: 2.6.0 => 2.6.0
    vuetify-loader: ^1.7.3 => 1.7.3
    vuex: 3.6.2 => 3.6.2
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Cannot be reproduced outside of current environment/project. However this thread seems to indicate far more devs have had this issue: https://github.com/vuejs/vue-cli/issues/1453

Only occurs when running serve through the Vue UI. It appears that the --dashboard argument triggers this problem. Without it, serving runs just fine.

What is expected?

That the vue cli operates as expected when serving

What is actually happening?

It builds, and then crashes. But only when the --dashboard argument is present

This problem cropped up after adding TypeScript support, and upgrading most of our packages. I have been unable to narrow it down to anything specific.

Build Log/Error:

NOTE: I added --max-old-space-size=4096 in an attempt to resolve the issue, it did not have any effect.

npx --max-old-space-size=4096 vue-cli-service serve --mode development --dashboard

INFO Starting development server... Starting type checking service... Using 1 worker with 2048MB memory limit 65% building 639/687 modules 48 active ...node_modules\core-js\modules_shared.jsBrowserslist: caniuse-lite is outdated. Please run next command npm update 98% after emitting vue-cli-dashboard-plugin

DONE Compiled successfully in 46972ms 12:51:03 PM No type errors found Version: typescript 4.5.4 Time: 11382ms WARN Couldn't parse bundle asset "C:\Users\Douglas\Documents\01 Programming\Platt\Sales\Sales.Frontend\dist\js\0.js". Analyzer will use module sizes from stats file.

<--- Last few GCs --->

[7572:00A40598] 50576 ms: Scavenge 842.4 (1005.1) -> 842.0 (1007.9) MB, 1.5 / 0.0 ms (average mu = 0.988, current mu = 0.863) allocation failure [7572:00A40598] 50725 ms: Mark-sweep (reduce) 842.0 (1007.9) -> 837.2 (989.3) MB, 148.9 / 0.0 ms (average mu = 0.962, current mu = 0.461) last resort GC in old space requested [7572:00A40598] 50898 ms: Mark-sweep (reduce) 837.2 (977.3) -> 835.8 (965.8) MB, 173.1 / 0.0 ms (average mu = 0.906, current mu = 0.000) last resort GC in old space requested

douglasg14b commented 2 years ago

Given when the error happens, after building, and only when the --dashboard flag is present (Which enables IPC to cli-ui nodejs server ) is this issue occurring in another process?

What further debugging can be done to figure out where/how/why this is occurring, and what workarounds are available?

I have increased node memory limits with environmental variables (NODE_OPTIONS | --max-old-space-size=2048), however it seems like w/e node process the CLI is using ignores those. As it keeps failing at ~1GB, despite the heap size being increased to 2GB.

Running npm run serve --node-arg='--max-old-space-size=2048' also seems to ahve no effect, I even went into node_modules/.bin and changed all calls to node.exe to be node.exe --max-old-space-size=2048. Still it fails around 1GB, which is the default...

DarknessChaser commented 2 years ago

If you are using Windows like me, you can try to use cross-env NODE_OPTIONS=--max-old-space-size=4096 node 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js' run serve

vuejs / vue-cli