vant
vant copied to clipboard
youzan
fix: teleport ssr in vue3
Ref https://github.com/vuejs/vue-next/issues/5126
In vue3 ssr scene, teleport node must be wrapped by div node otherwise will cause hydrate not match. The changes has been test succeed in my ssr project
🤔maybe it“s a feature not bug
发自我的iPhone
------------------ Original ------------------ From: neverland @.> Date: Sun,Dec 26,2021 10:59 PM To: youzan/vant @.> Cc: yuuang @.>, Author @.> Subject: Re: [youzan/vant] fix: teleport ssr in vue3 (PR #10099)
maybe we should wait for Vue to fix this bug?
— 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: @.***>
I wonder if the method on the official document can solve this problem:
https://github.com/vuejs/vue-next/tree/master/packages/server-renderer#handling-teleports
I think we should not to change the way to use Teleport to avoid the SSR issue, Teleport is used by many components. Maybe it should be solved by Vue or SSR framework.
The steps to fix the problem
1· In server side , insert teleport node to the exactly parent node by cheerio or jsdom to operate string of html
i have try it and find there must wrap teleport node inside div or fragment node
We can wait for the reply off Vue offical, if this solution is confirmed, I will merge this PR ^_^
This issue appears to have been fixed by Vue: https://github.com/vuejs/core/issues/5126#issuecomment-1129551606