Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vite-jqfhgu?file=src%2Fcomponents%2FAppSlideViews.vue,src%2Fcomponents%2FFinalView.vue,src%2Fcomponents%2FNextView.vue,src%2Fcomponents%2FSlideTransition.vue,src%2FApp.vue,vite.config.ts,package.json

Steps to reproduce

Try to click "go further".

What is expected?

I would expect it to be possible to use TransitionGroup with KeepAlive and properly transition between components while preserving components state for pages which are "before" the current page.

What is actually happening?

As you see there is an

vue.js:10099 Uncaught (in promise) TypeError: child.el.getBoundingClientRect is not a function
    at Proxy.<anonymous> (vue.js:10099:43)
    at renderComponentRoot (vue.js:2224:17)
    at ReactiveEffect.componentUpdateFn [as fn] (vue.js:7162:26)
    at ReactiveEffect.run (vue.js:423:19)
    at instance.update (vue.js:7212:52)
    at updateComponent (vue.js:7039:18)
    at processComponent (vue.js:6974:7)
    at patch (vue.js:6436:11)
    at ReactiveEffect.componentUpdateFn [as fn] (vue.js:7171:9)
    at ReactiveEffect.run (vue.js:423:19)

error which I am not sure is desired. I've seen some usages of transitions and keep alive and I think that one should work. Here is the demo in Vue 2

https://stackblitz.com/edit/node-fqext6?file=src%2Fcomponents%2FAppSlideViews.vue,src%2Fcomponents%2FTest.vue,src%2FApp.vue,src%2Fcomponents%2FNextView.vue,src%2Fcomponents%2FFinalView.vue

Basically the idea is to preserve the state of the component which are "before" the current view while destroying the state of components which are "after" current view. It's just some sort of form wizard behavior. I was able to make it work in Vue 2, but after migration to Vue 3 and a couple of fixes I was only able to make it work without transitions: https://stackblitz.com/edit/vite-swkwhb?file=src%2Fcomponents%2FAppSlideViews.vue,src%2Fcomponents%2FFinalView.vue,src%2Fcomponents%2FNextView.vue,src%2Fcomponents%2FSlideTransition.vue,src%2FApp.vue,vite.config.ts,src%2Fcomponents%2FTest.vue

System Info

No response

Any additional comments?

No response

There is a warn message. When I try to filter the null vnode, it works.

You are right, after closer inspection it seems that it works properly when filtering null values before mapping over. Thanks a lot @wusiquan, I totally missed that :) 🍺