vuepress
[Bug report]rendering exceptions when using teleport
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
- Clone this repo.
- Build and serve.
yarn install
yarn build
yarn serve
-
Open http://localhost:5050
-
Click the button then you link to
/about. -
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
And the behavior is different in dev and build:
🤔 Need some investigation
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.