related #5650

the error message is not same in chrome and firefox:

chrome:

firefox:

the error of slot function execution affects block tracking,as a workaround,add setBlockTracking(1) in catch.

@javastation When remove the outer div, the error seems gone sfc playground , so add a try catch maybe not a good fix.

@javastation When remove the outer div, the error seems gone sfc playground , so add a try catch maybe not a good fix.

Although there is no visual error in this example, it will enter full diff mode. If there are some other static html elements in addition to these three dynamic children, it will cause unnecessary performance consumption.

Not sure if try-catching the rendering of a slot is something that is supposed to be possible

@javastation I don't understand why add a outer div will cause this error.

@javastation I don't understand why add a outer div will cause this error.

flowchart TB
	subgraph A[showTable change]
		direction LR
			2(patch root vnode)-->3(root.el=preRoot.el):::red-->4(dynamicChildren!=null)-->|true|5(patch dynamicChildren,mount table using oldEl.parentNode)-->6(end:secondDiv.el is null):::red
		end
	subgraph B[checkbox change]
		direction LR
			12(patch root vnode)-->13(root.el=preRoot.el):::red-->14(dynamicChildren!=null)-->|false|15(full diff)-->16(diff second div,second.el = preSecond.el):::red-->17(now secondDiv.el:null)
		end
		A-->B
		classDef red fill:#faa;

The value of the second div vnode.el is null which affects the subsequent process, in my opinion.

hi ,i use nuxt3 + element plus，also have this issue， there this my can do minimal repo:
https://stackblitz.com/edit/nuxt-starter-hfqdfg?file=app.vue

error will show in console

This problem always occurs in pages that use keep-alive.

I also face this issue but I have no idea how to fix it nor do I know where exactly the issue occurs. It happens in production and dev mode with PrimeVue when I use nested tabs https://primefaces.org/primevue/tabview.

Sometimes when changing from one tab to another via URL param the error occurs. Is there any plan to fix it entirely?

I'm also experiencing a similar issue with PrimeVue. I replaced some unnecessary

<div v-if="someCond">
  <Suspense>
    <template v-for="(item, index) in items" :key="index">
      <CustomComponent />
    </template>
    <template #fallback> Loading... </template>
  </Suspense>
</div>

also faced this problem on nuxt 3.3.1
the error was not always there and I started to move from commit to commit to understand in what moment it appeared and what changes could lead to this error.
in my case, I came to a new project, which is written quite badly and there was such a construction:

<script setup>
...
await fetchCategories()
</script>

i changed it to:

<script setup>
...
useAsyncData('categories', () => fetchCategories())
</script>

and my variant with useAsyncData broke everything :)

should this error due to the massive unresolved issues be opened again?

Opened again?

It seems, although not yet clear, that when I replace the root tag, which contains a v-if directive, with a tag, and then make changes in my CustomComponent, it triggers the bug. I hope this information is not misleading.

This helped a lot, in my case, removing a v-if from the top level of a template resolved the bug. Now, the v-if directive is applied to a direct child:

<template>
   <div v-if="xxxx">
      <div>With Content</div>
   </div>
</template

Now:

<template>
   <div>
      <div v-if="xxxx">With Content</div>
   </div>
</template

Yeah I'm getting this as well and moving all the root level v-ifs would be quite some work for our project so would be great if it could be addressed :,) Also, we are getting some Cannot destructure property 'bum' of 'Y' as it is null. errors from the unmountComponent function which I doubt may be related?

It turns out in my case the component that was causing this bug was wrapped in a <transition> component. After removing the transition, everything works fine. (Vue version: 3.2.45)

Before:

<template>
	<transition name="fade">
	    <div>
		// .. other divs
	    </div>
	</transition>
</template

After:

<template>
	<div>
	  // .. other divs
	</div>
</template

Same issue in nuxt 3.6.5 and vue 3.3.4.
It happens in production build only.

why is this one not open????

why is this one not open????

Because the devs want a reproduction example, something impossible to get because of the random nature of this bug, sadly. If only the error message could be a little bit more descriptive.

even more important it is to take out the random nature and work on finding a reason from the devs/contributors