ant-design-vue
ant-design-vue copied to clipboard
When enabling SSR, errors occurs even when `<AMenu>` is placed inside `<ClientOnly>`
- [x] I have searched the issues of this repository and believe that this is not a duplicate.
Version
4.0.8
Environment
Microsoft Edge 119.0.2151.97
Reproduction link
https://stackblitz.com/edit/demo-ec9ac71
Steps to reproduce
- Create a project using Nuxt 3.8.2
- Install
@ant-design-vue/nuxt
and add tomodules
- Use
<AMenu>
outside or inside<ClientOnly>
What is expected?
No node mismatches in Nuxt
What is actually happening?
[Vue warn]: Hydration node mismatch:
- Client vnode: Symbol(v-fgt)
- Server rendered DOM: "" (text)
at <MenuContextProvider key="/article" overflowDisabled=false >
at <Anonymous>
at <ResizeObserver disabled=false onResize=fn<onOverflowResize> >
at <Overflow onMousedown=undefined prefixCls="ant-menu-overflow" component="ul" ... >
at <AMenu mode="horizontal" >
at <ClientOnly>
at <AppHeader>
at <ALocaleProvider locale=undefined ANT_MARK__="internalMark" >
at <LocaleReceiver children=fn<children> >
at <AConfigProvider>
at <App key=3 >
at <NuxtRoot>
[Vue warn]: Hydration node mismatch:
- Client vnode: Symbol(v-cmt)
- Server rendered DOM: "" (text)
at <AMenuItem key="/article" >
at <MenuContextProvider key="/article" overflowDisabled=false >
at <Anonymous>
at <ResizeObserver disabled=false onResize=fn<onOverflowResize> >
at <Overflow onMousedown=undefined prefixCls="ant-menu-overflow" component="ul" ... >
at <AMenu mode="horizontal" >
at <ClientOnly>
at <AppHeader>
at <ALocaleProvider locale=undefined ANT_MARK__="internalMark" >
at <LocaleReceiver children=fn<children> >
at <AConfigProvider>
at <App key=3 >
at <NuxtRoot>
[Vue warn]: Hydration node mismatch:
- Client vnode: Symbol(v-fgt)
- Server rendered DOM: "" (text)
at <MenuContextProvider key="/category" overflowDisabled=true >
at <Anonymous>
at <ResizeObserver disabled=false onResize=fn<onOverflowResize> >
at <Overflow onMousedown=undefined prefixCls="ant-menu-overflow" component="ul" ... >
at <AMenu mode="horizontal" >
at <ClientOnly>
at <AppHeader>
at <ALocaleProvider locale=undefined ANT_MARK__="internalMark" >
at <LocaleReceiver children=fn<children> >
at <AConfigProvider>
at <App key=3 >
at <NuxtRoot>
[Vue warn]: Hydration node mismatch:
- Client vnode: Symbol(v-cmt)
- Server rendered DOM: "" (text)
at <AMenuItem key="/category" >
at <MenuContextProvider key="/category" overflowDisabled=true >
at <Anonymous>
at <ResizeObserver disabled=false onResize=fn<onOverflowResize> >
at <Overflow onMousedown=undefined prefixCls="ant-menu-overflow" component="ul" ... >
at <AMenu mode="horizontal" >
at <ClientOnly>
at <AppHeader>
at <ALocaleProvider locale=undefined ANT_MARK__="internalMark" >
at <LocaleReceiver children=fn<children> >
at <AConfigProvider>
at <App key=3 >
at <NuxtRoot>
link https://github.com/vueComponent/ant-design-vue-nuxt/issues/21
This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days
abandoned project?
This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days