a-menu hidration node mismatch when routing

[fskarmeta]

In my current setup I'm using SSR and w have an a-menu component in the home index, when navigating to any route and then wanting to navigate back using the browser the navigations fails.

We get this console error

ntime-core.esm-bundler.js:4580 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toLowerCase')
    at hydrateNode (runtime-core.esm-bundler.js:4580:28)
    at hydrateSubTree (runtime-core.esm-bundler.js:5723:13)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5743:13)
    at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)
    at instance.update (runtime-core.esm-bundler.js:5862:51)
    at setupRenderEffect (runtime-core.esm-bundler.js:5870:5)
    at mountComponent (runtime-core.esm-bundler.js:5660:5)
    at processComponent (runtime-core.esm-bundler.js:5613:9)
    at patch (runtime-core.esm-bundler.js:5088:11)
    at mountChildren (runtime-core.esm-bundler.js:5332:7)
h

And the following warning

unk-VWWL2I6E.js:1449 [Vue warn]: Hydration node mismatch:
- Client vnode: Symbol(v-fgt) 
- Server rendered DOM: "" (text) 
  at <MenuContextProvider key="1" 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 <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {…} > > 
  at <RouteProvider key="/" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/', path: '/', query: {…}, hash: '', name: 'index', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <ALocaleProvider locale=undefined ANT_MARK__="internalMark" > 
  at <LocaleReceiver children=fn<children> > 
  at <AConfigProvider> 
  at <Default ref=Ref< Proxy(Object) {…} > > 
  at <AsyncComponentWrapper ref=Ref< Proxy(Object) {…} > > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>

It can be reproduced in this stackblitz
https://stackblitz.com/edit/github-52q5xr-xvhlgv?file=pages%2Fabout.vue,pages%2Findex.vue
although here we not have access to the native browser back button the warning can be simulated by navigating from the About page to the index using the button I added with the navigateTo method.

[fskarmeta]

seems to be a known thing for menu components, i guess it should't be used in an SSR context.

[kaikaibenkai]

However, I used '' to wrap it, but it still complains that. (Nuxt 3.8.2)

<ClientOnly><AMenu>...</AMenu></ClientOnly> replaced with <span>...</span> when I wrap it

[kaikaibenkai]

@fskarmeta Could you provide your solution? 🙏

I tried <ClientOnly> but it doesnt help

[vietanhbui]

+1

[3ein39]

+1