<RenderCacheable> causes Hydration Error when wrapped in <Teleport>

[VladStepanov]

<RenderCacheable> wrapped in <Teleport> causes Hydration error

[Vue warn]: Hydration node mismatch:
- rendered on server: <!--teleport anchor-->
- expected on client: div 

Reproduction: https://stackblitz.com/edit/nuxt-starter-wmm2fr?file=app.vue

Steps to reproduce:

• Open sandbox
• Open devtools
• Wait for nuxt start
• Catch hydration error

If you have any ideas please share with me. I'm ready to fix

[dulnan]

I think this is a bug in Nuxt. Let's use this simple component instead of <RenderCacheable>:

export default defineComponent({
  name: 'TestRender',

  async setup() {
    return () => h('div', 'Test')
  },
})

And then render it like this:

<Teleport to="body">
  <TestRender />
</Teleport>

Which gives the same hydration error:

runtime-core.esm-bundler.js:51 [Vue warn]: Hydration node mismatch:
- rendered on server: <!--teleport anchor-->  
- expected on client: div 
  at <TestRender> 
  at <Default ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=4 > 
  at <NuxtRoot>

However: The moment we remove async from the setup() function, it works:

export default defineComponent({
  name: 'TestRender',

  setup() {
    return () => h('div', 'Test')
  },
})

So it seems to happen only for async components. Since <RenderCacheable> needs to await loading the cached markup it must be async.

I've reported the bug here: nuxt/nuxt#29919

[VladStepanov]

Seems like I found a relevant issue vuejs/core#6207

[dulnan]

Indeed, looks like it. I have added a note in the docs that using <Teleport> is not possible. I would assume that once the bug has been fixed in Vue it will also work here.