search

vuepress / core

Vue-Powered Static Site Generator
https://vuepress.vuejs.org
MIT License
2.16k stars 922 forks source link

[Bug report]rendering exceptions when using teleport #127

Open yyyanghj opened 3 years ago

yyyanghj commented 3 years ago

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

    vupress-3

  4. Click the button then you link to /about.

  5. The content lost and the whole Vue App is destroyed.

Screenshots

vuepress-1

Expected behavior

vuepress-2

Environment info

meteorlxy commented 3 years ago

And the behavior is different in dev and build:

image

image

🤔 Need some investigation

meteorlxy commented 3 years ago

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.