ant-design-vue some components cannot render twice under vitepress build.

[qianyuhouse]

Describe the bug

dependencies used

• "ant-design-vue": "3.2.20".
• "vitepress": "^1.0.1".
• "vue": "^3.2.38".
• "@vitejs/plugin-vue": "^5.0.4"
• "vite": "^5.2.0"

A custom layout in .vitepress/theme like below.

<template>
  <div>
    <Button @click="handleClick">切换 显示和隐藏</Button>
    <Empty v-if="visible" />
    <Empty />
  </div>
</template>
<script lang="ts" setup>
import { Empty } from 'ant-design-vue';
import { ref } from "vue"
const visible = ref(true)

const handleClick = () => {
  visible.value = !visible.value

}
</script>

Reproduction

Steps

1. build.
   vitepress build docs.
2. serve.
   vitepress serve docs.
3. Click Button in the page.

Problem I face

Everything is normal at the first.But when I click the button to change the element in the page, 'Empty' component cannot be rendered.

Expected behavior

Expected.

No matter re-render times, I hope it can be rendered normal.

System Info

There's no any extra info.

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

That component is broken in SSR. Please create an issue at their repo instead (most likely its same as vueComponent/ant-design-vue#6939). The issue is reproducible with Nuxt too.

[qianyuhouse]

That component is broken in SSR. Please create an issue at their repo instead (most likely its same as vueComponent/ant-design-vue#6939). The issue is reproducible with Nuxt too.

thanks

[brc-dd]

Wrapping it with <ClientOnly> doesn't work either. My guess is their SSR style rendering thing they added in v4 has bugs. You probably can use older versions I guess or switch to client-side vite app or a different component library.

[qianyuhouse]

Wrapping it with <ClientOnly> doesn't work either. My guess is their SSR style rendering thing they added in v4 has bugs. You probably can use older versions I guess or switch to client-side vite app or a different component library.

I have tried using antd@v3 wrapped with <ClientOnly>, but it doesn't work either. I have looked at their source code, that image Vnode is declared at the global environment and it's a constant. And Vue3 docs notes that Vnode Must Be Unique.I don't know whether it's the cause or not.