Hydration node mismatch

这个报错目前暂不清楚是Nuxt3还是Antdv或是Vue3导致的。

报错示例

创建一个nuxt3页面pages/test.vue，内容如下：

<template>
  <a-dropdown>
    <a class="ant-dropdown-link" @click.prevent>
      Hover me
      <DownOutlined />
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a href="javascript:;">1st menu item</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script setup>
import { DownOutlined } from '@ant-design/icons-vue';
</script>
<style lang="scss">

</style>

当我们鼠标触发Hover事件之后，在console会看到如下报错

chunk-7QBH72LR.js?v=b086cde9:1641 [Vue warn]: Hydration node mismatch:
- Client vnode: Symbol(Comment) 
- Server rendered DOM: "" (text) 
  at <AMenuItem> 
  at <Anonymous> 
  at <ResizeObserver disabled=true onResize=fn<onOverflowResize2> > 
  at <Overflow onMousedown=undefined prefixCls="ant-dropdown-menu-overflow" component="ul"  ... > 
  at <AMenu mode="vertical" selectable=false expandIcon=fn<expandIcon2>  ... > 
  at <Align target=fn<bound getRootDomNode> key="popup" ref=Ref< undefined >  ... > 
  at <BaseTransition onBeforeEnter=fn<onBeforeEnter> appear=false persisted=false  ... > 
  at <Transition ref=Ref< undefined > onBeforeEnter=fn<onShowPrepare2> > 
  at <PopupInner prefixCls="ant-dropdown" point=null align= {points: Array(2), overflow: {…}, offset: Array(2), targetOffset: Array(2), ignoreShake: true}  ... > 
  at <Popup prefixCls="ant-dropdown" destroyPopupOnHide=false visible=true  ... > 
  at <Portal key="portal" getContainer=fn<bound getContainer4> didUpdate=fn<bound handlePortalUpdate> > 
  at <Trigger openClassName=undefined minOverlayWidthMatchTrigger=undefined alignPoint=undefined  ... > 
  at <Anonymous arrow=undefined trigger="hover" visible=undefined  ... > 
  at <ADropdown> 
  at <Test onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > > 
  at <RouteProvider key="/test" routeProps= {Component: {…}, route: {…}} pageKey="/test"  ... > 
  at <FragmentWrapper > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=2 > 
  at <NuxtRoot>

解决方案

但该报错一般只会出现在开发环境（即：yarn dev）。由于该报错会导致后续代码执行失败，所以我们可以关闭development环境的ssr临时解决该问题。

nuxt.config.ts

export default defineNuxtConfig({
    ssr: process.env.NODE_ENV !== "development",
    // ...
}