[SSR] <Teleport> cause hydration to fail

[paraboul]

Version

3.1.0-beta.6

Reproduction link

https://codesandbox.io/s/wizardly-kepler-y8n48

Steps to reproduce

Open sandbox link and check browser console.

What is expected?

Hydration should succeed.

What is actually happening?

It seems that some Teleport comments are causing hydration to fail.

[yyx990803]

This is expected because you need to explicitly handle SSRed Teleports.

They are exposed on the ssr context:

const ctx = {}
const html = await renderToString(app, ctx)

console..log(ctx.teleports)

You need to return this from render in entry-server.js and then inject them into the final HTML in server.js.

[zhangyuang]

What's your mean is i should use some library like js-dom and inserts ctx.teleports into the exactly dom node in server side? But if i use renderToNodeStream what should i do?

[awacode21]

How does the injection in rendered HTML work? when i check the rendered html string, the container it should teleport to is empty, without any comment. So how do i know where i have to add the teleport code? And when i check the ctx object their is a teleport buffer containing arrays. I am really questioning myself how to handle this

[awacode21]

This is expected because you need to explicitly handle SSRed Teleports.

They are exposed on the ssr context:

const ctx = {}
const html = await renderToString(app, ctx)

console..log(ctx.teleports)

You need to return this from render in entry-server.js and then inject them into the final HTML in server.js.

@yyx990803 can you provide an example of that injection?? Doesn't it make sense to mention this in The Vue documentation part about teleport, or the SSR part?

[awacode21]

when i check the mentioned ctx object i get:

{                                                                                                                                                                                                 23:20:11
  modules: Set(24) {
    'src/App.vue',
    'src/components/Noscript.vue',
    'src/components/Browserhint.vue',
    'src/layouts/MasterLayout.vue',
    'src/components/TheHeader.vue',
    'src/components/menu/MainMenu.vue',
    'src/pages/ScenePage.vue',
    'src/components/TheFooter.vue',
    'src/components/TheScene.vue',
    'src/components/FormComponent/FormComponent.vue',
    'src/components/FormValidationGroup/FormValidationGroup.vue',
    'src/components/FormFieldset/FormFieldset.vue',
    'src/components/FormInput/FormInput.vue',
    'src/components/FormField/FormField.vue',
    'src/components/BaseInput/BaseInput.vue',
    'src/components/FormSelect/FormSelect.vue',
    'src/components/BaseSelect/BaseSelect.vue',
    'src/components/FormCheckbox/FormCheckbox.vue',
    'src/components/BaseCheckbox/BaseCheckbox.vue',
    'src/components/FormConditional/FormConditional.vue',
    'src/components/FormRadioGroup/FormRadioGroup.vue',
    'src/components/BaseRadio/BaseRadio.vue',
    'src/components/IntroComponent/IntroComponent.vue',
    'src/components/BaseButton/BaseButton.vue'
  },
  __teleportBuffers: {
    "[data-scope-buttons='111']": [
      [Array],
      [Array]
    ]
  }
}

so there is no teleports object, only a __teleportBuffers object containing arrays which i don't know how to handle.

Using vue 3 with vite.

[awacode21]

It seems my problem is related to this: #4440
There is a PR provided since december to fix it which needs to be merged