Version

3.0.1

Reproduction link

https://github.com/anncwb/vite-transition-bug-repo

Steps to reproduce

I'm not sure which one of vue, vue-router or vite caused this problem. So I can only come here to ask questions

1. clone repo https://github.com/anncwb/vite-transition-bug-repo
2. yarn install and yarn dev
3. open http://localhost:3000
4. Click the button to switch routing. The page is not rendered.

I checked that this problem was caused by the mode attribute of the transition component. The following are the steps that can work normally

1. Delete the transition attribute mode="out-in"

<transition name="fade" mode="out-in"><transition/>  
=>
<transition name="fade" ><transition/>  

2. rm -rf node_modules/.vite_opt_cache
3. yarn dev

Normal page switching

The preliminary investigation may be caused by the component containing multiple root nodes

What is expected?

Normal page switching

What is actually happening?

transition components lose rendering

Please check your console:

vue.js:1174 [Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. 
  at <PageA onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <KeepAlive include="PageA,PageB" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="fade" mode="out-in" > 
  at <RouterView> 
  at <Layout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > 
  at <RouterView> 
  at <App>

Your pages must have one root node if you want to use them inside transitions

So I can only come here to ask questions

Remember to use the forum or the Discord chat to ask questions!