SSR hydration mismatch when conditional slot wrapped in transition

[Anoesj]

Vue version

3.4.23

Link to minimal reproduction

https://stackblitz.com/edit/hydration-mismatch-transition-slot-v-if

Steps to reproduce

In a Vue project using SSR (such as a Nuxt app):

• Create component with conditional slot, wrapped in a <transition> component

I created this issue in the Vue repository, since this seems to be a Vue-related issue, not Nuxt.

What is expected?

No hydration mismatch.

What is actually happening?

A hydration mismatch warning appears in the browser's console:

[Vue warn]: Hydration node mismatch:
- rendered on server: <!--[--> (start of fragment) 
- expected on client: Symbol(v-txt) 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition name="fade" > 
  at <ComponentWithSlot isLoading=false > 
  at <App key=3 > 
  at <NuxtRoot>

The code works, but there are minor differences in SSR and CSR markup that seem to be related only to Vue's internals.

SSR:

<div id="__nuxt"><div data-v-inspector="app.vue:2:3"><div data-v-inspector="components/ComponentWithSlot.vue:2:3"><!--[--> Hi, I&#39;m slotted content! <!--]--></div></div></div><div id="teleports"></div>

CSR:

<div id="__nuxt"><div data-v-inspector="app.vue:2:3"><div data-v-inspector="components/ComponentWithSlot.vue:2:3"> Hi, I'm slotted content! </div></div></div><div id="teleports"></div>

Note how the comments that indicate the start (<!--[-->) and end (<!--]-->) of conditional markup are missing in the CSR version.

To compare for yourself, clone this repo: https://github.com/Anoesj/vue-ssr-hydration-mismatch-demo

System Info

No response

Any additional comments?

No response

[Anoesj]

Seems kind of similar to #5352 and #5991, but not identical, hence the new issue.

[quiteeasy]

Minimal reproduction in Vue SFC playground

[Anoesj]

Thanks for the fast fix Evan 🥇