Skip to content
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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

tolking
Copy link
Contributor

@tolking tolking commented Mar 23, 2024

Before submitting a pull request, please read the contributing guide.

在提交 pull request 之前,请阅读 贡献指南

目前使用Vite5的SSR项目都可能会出现:刷新后 服务端的id一直自增,而客户端从0开始而引起水合错误 (如:#12548)

这个PR是让SSR用户注入一个初始值,以避免服务端id一直自增


我原本是想将 ID_INJECTION_KEY 导出为一个 Symbol(),但这和当前的构建冲突,这需要你的建议

@codecov-commenter
Copy link

Codecov Report

Attention: Patch coverage is 33.33333% with 4 lines in your changes are missing coverage. Please review.

Project coverage is 89.70%. Comparing base (fdc5f9d) to head (3ec4e9e).

Files Patch % Lines
packages/vant/src/composables/use-id.ts 33.33% 3 Missing and 1 partial ⚠️
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.
📢 Have feedback on the report? Share it here.

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 })',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

最好是不需要让用户注入内容,因为这样有点复杂了

Copy link
Member

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

那先等等官方的实现吧。

目前我能够想到避免服务端缓存的最优的方案就是这个。像指令方案改动比较大,或者Nuxt的useId方案不适用于普通的组件库。

@yoyo837
Copy link
Contributor

yoyo837 commented Apr 29, 2024

有进展吗?每天看到无数这种警告。在SSR、SSG 下。

image

@yoyo837
Copy link
Contributor

yoyo837 commented Apr 29, 2024

哦,好吧,等vue那边。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants