Teleport is throwing "TypeError: Cannot read property 'nextSibling' of null" on SSR

[ozguruysal]

Version

3.0.0-beta.14

Reproduction link

https://github.com/ozguruysal/vue3-ssr-playground/tree/issue-teleport

Steps to reproduce

Please install (yarn), build (yarn build) and run (yarn start) the project in the reproduction link. An example teleport is created in TeleportTest.vue and the teleport target is defined in server.js, here.

What is expected?

Teleport should work without errors.

What is actually happening?

"TypeError: Cannot read property 'nextSibling' of null" error is thrown in browser console along with two warnings.

---

Also looks like ssrTransformTeleport.ts needs to be updated with Teleport changes. Please see line 22.

[underfin]

The content of Teleport should be render into endofbody with ssr.But your don't it.This will work add this blew code instead of <div id="endofbody"></div>.

<div id="endofbody"><div id="content"><p>this will be moved to #endofbody.<br />Pretend that it's a modal</p></div>

[ozguruysal]

@underfin thanks for looking into this. Not sure I understand why I would try to teleport the content if I have to add it to the target element too.

Maybe <teleport> should be rendered client side only as in PortalVue by wrapping it in something like <client-only>?

Edit: Yes forcing it to render client side only solves the issue. I guess I was wrong to assume it'd work on SSR too.

[underfin]

Yeah.The Teleport (Portal) and their ssr is support by core.

[yyx990803]

FYI, after the fix in #1271 you should now get a warning about Teleport content mismatch. To fix that, you need to get the Teleport content by passing in an SSR context object (see https://github.com/vuejs/vue-next/blob/master/packages/server-renderer/__tests__/ssrTeleport.spec.ts#L7) and then inline that in the returned html in server.js.

[ozguruysal]

I see, thanks for the tip @yyx990803, I got it now and thanks for fixing the issue @underfin.