Hydration mismatch issues with SSR

[becem-gharbi]

TuSimple/naive-ui version (版本)

2.37.3

Vue version (Vue 版本)

3.4.6

Browser and its version (浏览器及其版本)

Chrome(120.0.6099.216)

System and its version (系统及其版本)

Linux(5.0)

Node version (Node 版本)

18.18.0

Reappearance link (重现链接)

https://stackblitz.com/edit/github-euic2u?file=nuxt.config.ts

Reappearance steps (重现步骤)

Run npm run dev and check console.

Expected results (期望的结果)

No hydration issues.

Actual results (实际的结果)

Multiple <[Vue warn]: Hydration attribute mismatch> warnings are shown.

Remarks (补充说明)

This issue is related to vue v3.4.0 introducing attributes check for hydration mismatch PR.

I have already opened an issue on the vue/core repo. However these type of issues are taken as special cases. Thus it's better to fix the library's implementation instead.

I have tested almost all the components. The issues are related to the following ones

• n-input attribute readonly
• n-checkbox attribute id of the label
• n-image attribute height and width
• n-tree attribute draggable

[2556227850]

问题解决了麻烦艾特我一下

[becem-gharbi]

These issues are getting solved in the vue core that's why I'm closing this one.

[fogine]

This is still an issue for case of n-checkbox id attribute of the label. naiveui version: ^2.37.3, vue: ^3.4.19

When rendering n-checkbox on server with a label it generates random id and assigns it to n-checkbox aria-labelledby= and id= arguments of n-checkbox__label span respectivelly.
I tried to assign static value to aria-labelledby= on the n-checkbox element which does nothing as its not supported.
It should be possible to get around this issue.

should I create a separate issue?

[becem-gharbi]

Probably the hydration mismatch of the id attribute is going to be solved in vue v3.5. A great video from a nuxt team member points to this issue https://youtu.be/d4-OjlicbiY?t=367.

[fogine]

So just to be sure, no workaround possible besides stopping to use n-checkbox until its fixed upstream I guess ?
It might be another 4 months until vue v3.5 is released.

[becem-gharbi]

You don't need to stop using n-checkbox. It'a warning that will hopefully gets solved in the near future.

[07akioni]

Probably the hydration mismatch of the id attribute is going to be solved in vue v3.5. A great video from a nuxt team member points to this issue https://youtu.be/d4-OjlicbiY?t=367.

I notice the issue today, hope to get vue's feature quickly.