[Bug report]rendering exceptions when using teleport

[yyyanghj]

Bug report

Description

I have a <Wrapper /> component, which is used in every layout component. If I use <teleport/> in <Wrapper/>, something weird will happen. When I navigate to /about, everything is gone and the whole Vue App is destroyed.

Steps to reproduce

Reproduction link / repo: https://github.com/yyyang1996/for-vuepress-issue-1

1. Clone this repo.
2. Build and serve.

yarn install
yarn build
yarn serve

3. Open http://localhost:5050

4. Click the button then you link to /about.
5. The content lost and the whole Vue App is destroyed.

Screenshots

Expected behavior

Environment info

• Browser: Microsoft Edge 90.0.818.46
• Vuepress version: 2.0.0-beta.12

[meteorlxy]

And the behavior is different in dev and build:

---

🤔 Need some investigation

[meteorlxy]

I think the issue is that we need to handle teleport SSR first:

https://github.com/vuejs/vue-next/blob/201060717d4498b4b7933bf8a8513866ab9347e4/packages/server-renderer/__tests__/ssrTeleport.spec.ts#L28-L29

I had ever put a TODO comment, but removed it in a later commit:

https://github.com/vuepress/vuepress-next/blob/9b4a2cd3bc5af63085ee4850215948268f5b8f92/packages/%40vuepress/bundler-webpack/src/build/renderPage.ts#L103

As far as I know, there is currently no good solution for teleport SSR yet. The SSR outlet of teleport is simply <!--teleport-start--><!--teleport-end-->, which does not provide any information about the ordering.