fix: SSR hydration error caused by useId #12719
Conversation
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #12719 +/- ##
==========================================
+ Coverage 89.61% 93.84% +4.23%
==========================================
Files 257 257
Lines 6999 7000 +1
Branches 1730 1732 +2
==========================================
+ Hits 6272 6569 +297
+ Misses 384 375 -9
+ Partials 343 56 -287 ☔ 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.
Vue 3.5 会提供一个 hook 来解决这个问题，参考 vuejs/rfcs#557
There was a problem hiding this comment.
那先等等官方的实现吧。
目前我能够想到避免服务端缓存的最优的方案就是这个。像指令方案改动比较大，或者Nuxt的useId方案不适用于普通的组件库。
|
有进展吗？每天看到无数这种警告。在SSR、SSG 下。 
|
|
哦，好吧，等vue那边。 |
|
Hello, |
|
是不是直接更新版本上来就解决了？🤔 建议把最低依赖升到3.5.0, 发布为一个minor版本。 |
|
已经修改成了通过 vue 的 useId 生成 id 了，生成的 id 格式和之前的 id 格式保持一致。 更新了 vue 的最低版本，可能对用户的影响比较大 |
|
@chenjiahan 请帮忙看看 |
如果使用 data-allow-mismatch，是不是可以在不更新版本的情况下，暂时解决这个问题 🤔 |
压制警告和让id在ssr和客户端一致应该不是同一回事吧？如果觉得压制警告就是解决问题的话，可以选择这样做，但原始问题应该是解决id不一致 |
是不一样，所以我说的是暂时。因为必须升版本才能完全解决这个问题，但对用户而言并不是很友好。 |
|
晚些时候我会创建一个 PR 使用 data-allow-mismatch 暂时消除警告，因为它不会引入任何副作用，如果我们决定升级版本，也可以之后将它移除。 |
|
同意～ 直接用 useId 对用户的 Vue 版本要求太高了，我倾向于过几个月再使用 useId，那个时候 3.5 应该有比较高的使用比例了。 现阶段用 data-allow-mismatch 是一个比较好的过渡方案 |
|
那意味着我诉求id一致的话应该重新创建一个新issue？ |
|
或者，能不能写兼容代码？如果是3.5.0的useId就优先使用，否则使用 data-allow-mismatch 压制警告 |
|
|
如果想使用 vue 中的 useId，现在你可以通过 pnpm patch 这类方式修改源码。或者一个插件 |
Before submitting a pull request, please read the contributing guide.
在提交 pull request 之前，请阅读 贡献指南。
Breaking change
使用 vue 3.5 的 useId 来生成 id