TransitionGroup hydration mismatch

[fabkho]

Vue version

4.4.15

Link to minimal reproduction

https://stackblitz.com/edit/vue-ssr-example-9tg6p3?file=app.js

Steps to reproduce

Describe the Bug

A hydration mismatch occurs inside a TransitionGroup when a tag is rendered and there is an element with v-if inside.

[Vue warn]: Hydration children mismatch on <div>​…​</div>​ 
Server rendered element contains more child nodes than client vdom. 
  at <TransitionGroup tag="div">

Removing the tag still causes this warning:

[Vue warn]: Hydration node mismatch:
- rendered on server: <div>​…​</div>​  
- expected on client: Symbol(v-fgt) 
  at <TransitionGroup> 
  at <App>

Reproduction

To reproduce the issue in Vue SSR:

import { createSSRApp } from 'vue';

export function createApp() {
  return createSSRApp({
    data() {
      return {
        data: [
          { id: 1, name: 'Item 1' },
          { id: 2, name: 'Item 2' },
        ],
      };
    },
    template: `
      <div>
        <transition-group tag="div">
          <div v-for="(item, index) in data" :key="item.id">
            {{ item.name }}
          </div>
          <div v-if="false" :key="3"></div>
        </transition-group>
      </div>
    `,
  });
}

Observations:

• The hydration mismatch occurs when using v-if inside a TransitionGroup with a tag specified.
• Removing the tag causes a different but similar warning.

What is expected?

What is actually happening?

System Info

System:
    OS: macOS 14.3.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 1.96 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 9.0.6 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 127.0.6533.89
    Safari: 17.3.1

Any additional comments?

I have also reported this problem in the Nuxt repo: TransitionGroup hydration mismatch · Issue #28381 · nuxt/nuxt. In Nuxt, an additional hydration mismatch occurs when there is a comment inside the TransitionGroup, which should have been resolved here.

[edison1105]

a workaround <transition-group :tag="'div'">