vue-cli: yarn serve - JavaScript heap out of memory crash

"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.

@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. ( ´▽｀)

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

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

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

@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.

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

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

Any solution ?

solution:

npm i -D cross-env

"scripts"; { "dev": "cross-env NODE_OPTIONS=--max_old_space_size=8192 vue-cli-service serve --mode development" }

I’m still getting this crash as well - have tried the --max_old_space_size=4096 but still crashes after about 10 mins. The old vue-cli webpack worked great no problems at all. Any thoughts, solutions, anything???

There is definitely a (large) memory leak causing yarn serve / npm serve to crash consistently and reproducibly. Yes, I can delay that crash somewhat by increasing memory for Node until my dev machine has swapped everything else out of RAM. Not sure why this issue is closed?

This memory leak is most egregious when I use web workers, I think since they bundle several npm libraries, and apparently the entire thing is then leaked. I can crash the yarn serve process on my second build without fail, with my project’s particular combination of web workers, typescript, and babel. But I can see that that combo is not required for the memory leak to occur.

Every time a file-save event triggers a build, the node process inches up in memory. (In my case it “inches up” by about 400k RAM on every save). I’ve bumped Node up to a max of 4GB of RAM which sometimes gets me through a couple hours of dev before it crashes.

I’d like to help find the actual cause. What can I do to help?

• I’ve experienced this problem with every version of vue-cli since I started using the 3.x release
• With every version of TypeScript from 2.6 up to current 3.6
• Using each of Node 8.x, 10.x, and 12.x. No difference; the memory leak is always there.
• Adding folders to .eslintignore does not solve the problem for me
• This is on WSL Ubuntu 18.04 LTS if that makes any difference.
• My project uses the following vue-cli plugins: babel, eslint, typescript, unit-jest.

Hoping these details help us find a real solution!

solution:

npm i -D cross-env

"scripts"; { "dev": "cross-env NODE_OPTIONS=--max_old_space_size=8192 vue-cli-service serve --mode development" }

for me worked even just cross-env NODE_ENV=development vue-cli-service serve thank you

1. Try to increase the heap size
2. If you don’t ignore the /dist in .gitignore, then you need to add /dist into the .eslintignore

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

edit package.json

“serve”:“node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve --open”

@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: https://github.com/webpack/webpack/issues/1914#issuecomment-392660230. 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.

Well, not in every case can we enlarge the heap size easily. In my practice, i have apps (docker) built for both amd64, arm32v7. And the arm32v7 version is supposed to built on a Raspberry Pi 3B, which only got 1GB ram. It may take longer, but I will eventually get what I need. But when this error occurs, the whole RPi building toolchain fail to deliver.

So I see that this issue is closed but none of the fixes noted here in changing the package.json seem to fix the issue. I was using the Vue UI and am no longer able to and am starting to no longer be able to make more than 2 or 3 changes before it runs out of memory.

I am trying increase the memory for the following script

"build-watch": "vue-cli-service build --mode development --dest ../../wwwroot/vue --target app --watch" and get an error when I attempt to change it to

"build-watch": "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service build --mode development --dest ../../wwwroot/vue --target app --watch"

@runxc1 , it throws below error:

D:\ej2-vue-samples>npm run check2

> ej2-vue-samples@1.0.0 check2 D:\ej2-vue-samples
> node --max_old_space_size=4096 node_modules/.bin/vue-cli-service build --mode development

D:\ej2-vue-samples\node_modules\.bin\vue-cli-service:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:283:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ej2-vue-samples@1.0.0 check2: `node --max_old_space_size=4096 node_modules/.bin/vue-cli-service build --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ej2-vue-samples@1.0.0 check2 script.

i am using like below:

"check":"node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build --open",

ok, just in case this is helpful to anyone…i got rid of this issue with

  chainWebpack: (config) => {
    config.resolve.set('symlinks', process.env.NODE_ENV !== 'development');
  },

however turns out that vue-cli -service build command still has lots of problems with my npm linked package and unfortunately i cant figure out the correct webpack settings…but i guess thats a different story 😕

i’m currently used version is 3.0.0-beta.15(often crashed because of memory leaks), what can I do to upgrade to the new version(v3.0.0-rc.3)?

“build”: “node --max-old-space-size=8192 node_modules/vite/bin/vite.js build”,

So I see that this issue is closed but none of the fixes noted here in changing the package.json seem to fix the issue. I was using the Vue UI and am no longer able to and am starting to no longer be able to make more than 2 or 3 changes before it runs out of memory.

I am trying increase the memory for the following script

"build-watch": "vue-cli-service build --mode development --dest ../../wwwroot/vue --target app --watch" and get an error when I attempt to change it to

"build-watch": "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service build --mode development --dest ../../wwwroot/vue --target app --watch"

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 I encounter this problem always, even use your workaround. But this problem’s gone when I disable eslint by [lintOnSave: false] in vue.config.js~~

I’m having similar issue with running some project using vue-cli-service as soon as I inject a local dev-version of a package to be used in that project using npm link. Raising heap size didn’t work out. As soon as I publish the package on npm and replace the link with installation from npm repo everything is working as expected. Any clues on this?

UPDATE: Ok, kept searching just a bit. And it looks like quite several tools around and including webpack were/are having issues with handling symlinked deps (according to this and all the issues linked there). That’s a bummer for trying to work with npm ecosystem e.g. by developing packages to be part of a VueJS project if there is no other way but fixing webpack configuration through vue CLI configuration the pretty hard way. What would be the best approach to control this from vue.config.js?

I’m also having this problem a few times / day after a few dozen of saves even when increasing the max_old_space_size=4096. I never had this problem using the old vue cli 2.9.x + webpack template and the default max_old_space_size. perhaps an upstream bug somewhere that is increasing the heap ?