Subscribe on changes!

"Maximum call stack size exceeded" when using v-show on a component using transition as root element

avatar
Feb 2nd 2022

Version

3.2.29

Reproduction link

sfc.vuejs.org/

Steps to reproduce

  1. Open the repro.
  2. Wait. (up to 3 minutes)

What is expected?

The code should run indefinitely, without warnings.

What is actually happening?

After (around) three minutes, the console is flooded with "Maximum call stack size exceeded" errors and the browser slows down to a crawl. This gets worse the longer the page is left open.


I had refactored a lot of my code to use embedded transitions in components and forgot remove one place where I used v-show instead of the new "visible" prop. That crashed my app after a while.

avatar
Feb 2nd 2022

rawSlot after an update will already be normalized. resulting in a normalized slot function being normalized over and over.

with enough updates calling the normalized slot will reach the max stack size

https://github.com/vuejs/core/blob/644971ec06642817cf7e720ad4980182d2140f53/packages/runtime-core/src/componentSlots.ts#L61-L79

this patch will fix this bug, but perhaps there might be an higher level fix.

const normalizeSlot = (key, rawSlot, ctx) => {

    if(rawSlot && rawSlot._c === false) {
        // already normalized  
        return rawSlot 
    }
    const normalized = withCtx((...args) => {
     ...
    }, ctx);
    normalized._c = false;
    return normalized;
};
avatar
Feb 3rd 2022

@lidlanca should be

if(rawSlot._n) {
    // already normalized  
     return rawSlot 
}