Hydration node mismatch when overwriting prose components

Environment

---

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.10
• Nitro Version: 0.5.3
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/nuxt-starter-dmjv7l?file=components/content/ProseImg.vue

Describe the bug

Updated: my previous report was incorrect and I have isolated the issue to my prose component overwriting. See edit history for my old report if you need.

It looks like the hydration node mismatch happens if I overwrite the img prose component (I haven’t tested other type yet). See the linked reproduction above.

It looks like if I add any extra element to the new ProseImg component, it will result as a hydration node mismatch error:

[Vue warn]: Hydration children mismatch in <div>: server rendered element contains more child nodes than client vdom. 
  at <ContentRendererMarkdown value= {_path: '/', _draft: false, _partial: false, _locale: 'en', _empty: false, …} excerpt=false tag="div" > 
  at <ContentRenderer key="content:index.md" value= {_path: '/', _draft: false, _partial: false, _locale: 'en', _empty: false, …} > 
  at <Anonymous > 
  at <Anonymous > 
  at <Anonymous name="default" > 
  at <DocumentDriven onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/" routeProps= {Component: {…}, route: {…}} pageKey="/"  ... > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=1 > 
  at <NuxtRoot>

To be more specific, having the <div> tag will trigger this error:

// ProseImg.vue
<template>
  <div>
    <img :src="src" :alt="alt" :width="width" :height="height" />
  </div>
</template>

Maybe the SSR code didn’t see the overwritten component?

Thank you.

Additional context

No response

Logs

No response

[fanzeyi]

@michaelvcolianna My current work around is to add <client-only> tag at the root of my customized ProseImg component, but it will also disable SSR for images though.

[michaelvcolianna]

@fanzeyi I’m not a fan of this but it works:

/components/content/ProseP.vue

<script setup>
const slots = useSlots()

// Hacky check for an image
const isImage = computed(() => {
  return slots.default()[0].type.tag === 'img'
})
</script>

<template>
  <div class="prose-image" v-if="isImage"><slot /></div>
  <p v-else><slot /></p>
</template>