Transition wrapper components break hydration

[CyberAP]

Version

3.1.1

Reproduction link

https://codesandbox.io/s/goofy-sid-ikmtb?file=/src/App.vue

Steps to reproduce

1. Create an SSR App with Vue 2 compatibility mode
2. Add a component that wraps <transition> component
3. Try to render anything wrapped in that component

What is expected?

Hydration should work without errors

What is actually happening?

Hydration fails with the message:

vue.runtime.esm-bundler.js:1343 [Vue warn]: Hydration node mismatch:
- Client vnode: Symbol(Comment) 
- Server rendered DOM: <!--[--> (start of fragment) 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition name="transition-fade" > 
  at <TransitionWrapper> 
  at <App>

[andylizi]

This is actually unrelated to compat. As far as I can tell, it happens whenever there's a <slot> wrapped in <transition>.

Here's my reproduction using only [email protected]: https://codesandbox.io/s/9mo46?file=/src/App.vue

[209]

No progress on the problem?
I have bug with vue3 and element-plus dropdown. Slot on transition too.

[KenCorbettTruepic]

If you wrap the slot in a div like this it doesn't complain anymore:

<transition>
  <div>
    <slot />
  </div>
</transition>

This feels like a hack but it at least gets rid of the warning.

[adamcikado]

Any update on this?