New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: SSR hydration error caused by useId #12719
base: main
Are you sure you want to change the base?
Conversation
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #12719 +/- ##
==========================================
- Coverage 89.75% 89.70% -0.06%
==========================================
Files 257 257
Lines 6835 6839 +4
Branches 1660 1662 +2
==========================================
Hits 6135 6135
- Misses 374 378 +4
Partials 326 326 ☔ View full report in Codecov by Sentry. |
return `${name}-${++current}`; | ||
if (typeof window === 'undefined' && !inject(ID_INJECTION_KEY)) { | ||
console.warn( | ||
'[vant useId] Looks like you are using server rendering, we suggest injecting an initial value for the ID. eg: app.provide("van-id-injection", { current: 0 })', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
最好是不需要让用户注入内容,因为这样有点复杂了
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Vue 3.5 会提供一个 hook 来解决这个问题,参考 vuejs/rfcs#557
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
那先等等官方的实现吧。
目前我能够想到避免服务端缓存的最优的方案就是这个。像指令方案改动比较大,或者Nuxt的useId方案不适用于普通的组件库。
哦,好吧,等vue那边。 |
Before submitting a pull request, please read the contributing guide.
在提交 pull request 之前,请阅读 贡献指南。
目前使用Vite5的SSR项目都可能会出现:刷新后 服务端的id一直自增,而客户端从0开始而引起水合错误 (如:#12548)
这个PR是让SSR用户注入一个初始值,以避免服务端id一直自增
我原本是想将
ID_INJECTION_KEY
导出为一个Symbol()
,但这和当前的构建冲突,这需要你的建议