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

SSR Hydration mismatch with HeadlessUI starting in 3.4.x #10000

Closed
drewtownchi opened this issue Jan 4, 2024 · 2 comments · Fixed by #10011
Closed

SSR Hydration mismatch with HeadlessUI starting in 3.4.x #10000

drewtownchi opened this issue Jan 4, 2024 · 2 comments · Fixed by #10011

Comments

@drewtownchi
Copy link

drewtownchi commented Jan 4, 2024

Vue version

3.4.5

Link to minimal reproduction

https://github.com/drewtownchi/ssr-hydration-issue

Steps to reproduce

Run the project and look at the console. I originally found this when working in an Astro project but recreated it in a standalone Vite SSR template as a minimal repro.

What is expected?

No hydration issue

What is actually happening?

The rendered id for the disclosure button is increasing by 2 every time but the expected always stays at 1

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 16.18 GB / 31.95 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.77)
    Internet Explorer: 11.0.22621.1

Any additional comments?

This was not an issue on 3.3.x but all version since 3.4.0 have exhibited this behavior.

@drewtownchi drewtownchi changed the title Hydration mismatch with HeadlessUI starting in 3.4.x SSR Hydration mismatch with HeadlessUI starting in 3.4.x Jan 4, 2024
@paro-paro
Copy link

I believe the same hydration issue is affecting vuetify => issue

Here is a reproduction which includes both an attribute and style mismatch on Nuxt SSR starting on vue >= v3.4.0

@edison1105
Copy link
Member

edison1105 commented Jan 5, 2024

@paro-paro
image
The value attribute is added to the textarea because of this line:
https://github.com/vuetifyjs/vuetify/blob/9e4daa81bfe3046fcf7e4a731809c3d554b3df54/packages/vuetify/src/components/VTextarea/VTextarea.tsx#L229

The value attribute of the textarea should be ignored

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
3 participants