Version

3.2.26

Reproduction link

github.com

Steps to reproduce

git clone git@github.com:zhangyuang/vite-ssr-error-require.git git checkout bug/teleport-ssr yarn && yarn dev open http://127.0.0.1:3000

What is expected?

hydrate without mismatch

What is actually happening?

teleport node will render comment node in server side but not render the same comment node when hydrate teleport node

Looks like the same problem as #3869.

The solution reference is as follows: https://github.com/vuejs/vue-next/issues/3869#issuecomment-852115768

thanks，let me take a look

发自我的iPhone

------------------ Original ------------------ From: ygj6 @.> Date: Sat,Dec 18,2021 3:17 PM To: vuejs/vue-next @.> Cc: yuuang @.>, Author @.> Subject: Re: [vuejs/vue-next] bug(ssr): teleport render bug in ssr (Issue #5126)

Looks like the same problem as #3869.

The solution reference is as follows: #3869 (comment)

— Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you authored the thread.Message ID: @.***>

🤔 As the solution, i can't determine what should i do 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?

I use cheerio to insert node, but the dom struct still not match with server side comment node

const ctx = {}
  let html = await renderToString(app, ctx)
  const $ = cheerio.load(html)
  for (const target in ctx.teleports) {
    const content = ctx.teleports[target]
    $(target).append(content)
  }
  html = $.html()

In addition, there must wrap teleport node in a div and the to props cannot be body

import { defineComponent, Teleport } from 'vue'
export default defineComponent({
  setup() {
    const teleport = '#pop'
    return () => (
      <div>
      <Teleport to={teleport}>
        <div> yes </div>
      </Teleport>
      </div>
    )
  }
})

But i don't know how to fix the issue when using stream🤔

@zhangyuang i am dealing with the same problem. When i check the ctx object it only contains this:

__teleportBuffers: {
   "[data-scope-buttons='111']": [
     [Array],
     [Array]
   ]
 }

instead of the mentioned teleport object which would be a Record<string, string>.

So i ask myself why i am not getting the documented teleport object but instead this kind of Buffer... and how to handle that buffer. Any idea? I really appreciate any help.

ok, so my problem is related to: https://github.com/vuejs/core/issues/4440 and will be fixed by https://github.com/vuejs/core/pull/5187

The repro is a bit convoluted, but I can no longer reproduce this locally after b60cff05 - they are likely the same issue (Teleport used as component root)