RangeError: Maximum call stack size exceeded

[sandipbiswasbehala]

Version

2.6.11

Reproduction link

https://jsfiddle.net/rwg4k2ns/

not working only in chorme desktop 81.XXX. working in firefox,edge , mobile chrome.

Steps to reproduce

Below snippet in .js file not working and getting RangeError: Maximum call stack size exceeded
v-for="n in 200000"
:key="n">Hello World {{ n }}

Workig : no error
v-for="n in 100000"
:key="n">Hello World {{ n }}

What is expected?

list will be shown

What is actually happening?

getting RangeError: Maximum call stack size exceeded

[sandipbiswasbehala]

please comment back any one form vue team

[albertodeago]

@sandipbiswasbehala I don't think opening an issue and asking the same day for a response is nice.
Anyway, you're saying the problem is trying to show 200,000 items...
That's a large amount of items to render... Have you considered using a virtual scroller like this or this?

[mhrabiee]

@sandipbiswasbehala As @albertodeago mentioned, it's not really a good idea to render such a large amount of items and it's better to change your UI design and/or architecture, however you can fix this particular issue simply putting your items inside a parent element.

So instead of:

var app = new Vue({
  el: '#app',
  template: `
  <div>
      <span>Details:</span>
      <div v-for="n in 200000" :key="n">Hello World {{ n }}</div>
  </div>
  `
});

You should use:

var app = new Vue({
  el: '#app',
  template: `
  <div>
      <span>Details:</span>
      <div>
          <div v-for="n in 200000" :key="n">Hello World {{ n }}</div>
      </div>
  </div>
  `
});

Working Example (Tested in Chrome Desktop 81 and Chrome Desktop 83)
https://jsfiddle.net/mhrabiee/g8n7er60/7

[sandipbiswasbehala]

@mhrabiee
thanks.

[mhrabiee]

This issue can be closed.

[czf1998]

please comment back any one form vue team

[czf1998]

This issue can be closed.
please comment back any one form vue team.

[chumager]

Hi, my problem as in #11675 is not trying to deploy several components who does the same, my problem is more like complex components who uses several other components so I don't need to show 200k components to crush, just change page on my table and the error is the same...

Even tough, it applies to the sum of components shown in the SPA, I've tested it with 20, 50 and 100 items per page and in all options it crush sooner or later when move between pages (in the table).

maybe my case is more memleak than the capacity of render components and in the edge case looks the same.

I've done several memory test and the DOM elements between pages keeps around 0 (X added and X deleted), but (array) and (closure) keeps growing.

I'll repeat the test and upload some screenshots, because the snapshots are around 0.5 GB.

Regards

[HittiGubbi]

Also I am running into this "Maximum call stack size exceeded"-error in an app that uses a vuetify v-data-table table. The error comes when the data underlying the table is updated to contain something like 1000 rows of data (so not yet absolutely huge). The error is initiated by row 5997 of vue.runtime.esm.js in Vue version 2.6.12:

insertedVnodeQueue.push.apply(insertedVnodeQueue, vnode.data.pendingInsert);

E.g. the MDN documentation about the apply-function cautions that it will overflow the call stack if there are too many arguments.

Is it really necessary to use the apply-function here instead of e.g. a traditional for-loop or some other alternative? To me this seems like a completely artificial limitation on how large number of inserted nodes the Vue framework can handle.