Hydration class/style/attr mismatch on SSR components #10051

Josepdal · 2024-01-09T11:33:47Z

Vue version

3.4.7

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-14rqc1

Steps to reproduce

Visit the reproduction Link.
IMPORTANT: The viewport have to be large. I have extended the browser to my second monitor to increase the website width size.

What is expected?

There should be no vue warns

What is actually happening?

There are mismatch vue warns

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 Intel(R) Core(TM) i9-14900KF
    Memory: 36.76 GB / 63.85 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.9.2 - ~\<privacy-deleted>\node_modules\.bin\npm.CMD
  Browsers:
    Chrome browser: 120.0.0.0

Any additional comments?

This happens since Vue 3.4.5

[Vue warn]: Hydration class mismatch on <div class="v-slide-group v-slide-group--has-affixes v-slide-group--is-overflowing" style tabindex="0">…

rendered on server: class="[object Set]"
- expected on client: class="[object Set]"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch.
  at

This also happens with other components, VNavigationDrawer and VBanner, all of them using computed display classes --mobile.
Don't know if this has anything to do with: /vuetify/src/composables/display.ts
const displayClasses = computed(() => { ... }

Another similar bug has been solved recently in Vue v3.4.6
#10006

As I don't know how to reproduce the error without Vuetify and have no idea what is exactly the root cause of this issue, I am opening the same issue in both projects.

Link to Vuetify issue: vuetifyjs/vuetify#19002

Josepdal · 2024-01-10T08:30:30Z

I am reopening it because there still seems to be a problem.

Examples:

Hydration attribute mismatch on <input...
https://stackblitz.com/edit/nuxt-starter-14rqc1

Also migueabellan is having same issues with VNavigationDrawer and VAppBar.

Hydration attribute mismatch on <header...
Here is his code: https://stackblitz.com/edit/nuxt-starter-wtdujy

Issues from other libs:
nuxt/image#1189
nuxt/image#1190

Thanks for your help!

Josepdal · 2024-01-10T08:46:19Z

It looks like changes are being made, let's see if it solves these problems as well.

972face

yyx990803 · 2024-01-10T16:57:13Z

~~Looks like a duplicate of #10057~~

yyx990803 · 2024-01-10T17:01:23Z

I can't seem to reproduce the class related warnings, can only see mismatch for readonly which is fixed in 972face

yyx990803 · 2024-01-10T17:02:33Z

If the readonly issues are the only ones left then I'm closing this. Please let me know if the class mismatch issue persists.

Josepdal · 2024-01-10T19:33:59Z

I tried the new release and my console is full of hydration warns. I think it still needs some work to fix it.

In my particular case I am using Vuetify and I am getting now "Hydration attribute mismatch" on many components.

[Vue warn]: Hydration attribute mismatch on <li class="v-breadcrumbs-item" style>
<li class="v-breadcrumbs-item" style=""></li>
  - rendered on server: icon=""
  - expected on client: icon="[object Object]"

 [Vue warn]: Hydration attribute mismatch on <label class="v-label v-field-label" style for="input-13">
 <label class="v-label v-field-label" style="" for="input-13"></label>
  - rendered on server: for="input-13"
  - expected on client: for="input-16"

For this one I have many warns up to input-27

[Vue warn]: Hydration attribute mismatch on <img class="v-img__img v-img__img--cover" style src="<privacy-removed>">
<img class="v-img__img v-img__img--cover" style="" src="<privacy-removed>">
  - rendered on server: draggable="true"
  - expected on client: draggable=""

In total I have 14 warn messages in that page.

I am trying to reproduce the same in the following page, but it is working fine there. This is so weird.
https://stackblitz.com/edit/nuxt-starter-14rqc1

And then, here is the example from @migueabellan bumped to the latest version that still fails with the following warn: [Vue warn]: Hydration style mismatch on
https://stackblitz.com/edit/nuxt-starter-lunnwj

Hope this can help, sorry for tagging @yyx990803 As the issue is closed, I don't know any other way to keep this conversation.

While writing I see other issue being created: #10069

pjninnim · 2024-01-11T07:33:22Z

I too agree with the above, some more work is still required to resolve this. I've just tested the new release and although it has resolved some of the issues, such as the one with the readonly attribute. This is still occurring on others, such as the list attribute:

[Vue warn]: Hydration attribute mismatch on <input name="test" value></input>
  - rendered on server: list="null"
  - expected on client: list=""

Simplified code to reproduce:

<template>
  <input
    name="test"
    :list="dataList.options.lengh > 0 ? dataList.name : undefined"
    value=""
  >
  <datalist :id="dataList.name " v-if="dataList.options.length > 0">
    <option v-for="o of dataList.options||[]" :key="o" :value="o" />
  </datalist>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'testInputComponent',

  setup() {
    return {
      dataList: {
        name: 'test',
        options: []
      }
    }
  }
})
</script>

pjninnim · 2024-01-11T11:04:06Z

I too agree with the above, some more work is still required to resolve this. I've just tested the new release and although it has resolved some of the issues, such as the one with the readonly attribute. This is still occurring on others, such as the list attribute:

[Vue warn]: Hydration attribute mismatch on <input name="test" value></input>
  - rendered on server: list="null"
  - expected on client: list=""

Simplified code to reproduce:

<template>
  <input
    name="test"
    :list="dataList.options.lengh > 0 ? dataList.name : undefined"
    value=""
  >
  <datalist :id="dataList.name " v-if="dataList.options.length > 0">
    <option v-for="o of dataList.options||[]" :key="o" :value="o" />
  </datalist>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'testInputComponent',

  setup() {
    return {
      dataList: {
        name: 'test',
        options: []
      }
    }
  }
})
</script>

Resolved with the latest release https://github.com/vuejs/core/blob/main/CHANGELOG.md#349-2024-01-11 🎉

PP-Tom · 2024-01-11T11:21:44Z

With Nuxt Image I'm getting a lot of hydration errors on the latest Vue (3.4.9)

  - rendered on server: referrerpolicy="undefined"
  - expected on client: referrerpolicy=""
  
  - rendered on server: usemap="undefined"
  - expected on client: usemap=""
  
  - rendered on server: crossorigin="undefined"
  - expected on client: crossorigin=""
  
  - rendered on server: loading="auto"
  - expected on client: loading=""
  
  - rendered on server: decoding="auto"
  - expected on client: decoding=""

Josepdal · 2024-01-11T11:27:33Z

Still having the same errors

Here is an example:
https://stackblitz.com/edit/nuxt-starter-14rqc1

yyx990803 · 2024-01-11T13:33:17Z

@Josepdal 3907c87

Josepdal · 2024-01-11T16:14:03Z

I tried the new release and my console is full of hydration warns. I think it still needs some work to fix it.

In my particular case I am using Vuetify and I am getting now "Hydration attribute mismatch" on many components.
[Vue warn]: Hydration attribute mismatch on <li class="v-breadcrumbs-item" style>
<li class="v-breadcrumbs-item" style=""></li>
  - rendered on server: icon=""
  - expected on client: icon="[object Object]"
 [Vue warn]: Hydration attribute mismatch on <label class="v-label v-field-label" style for="input-13">
 <label class="v-label v-field-label" style="" for="input-13"></label>
  - rendered on server: for="input-13"
  - expected on client: for="input-16"
For this one I have many warns up to input-27
[Vue warn]: Hydration attribute mismatch on <img class="v-img__img v-img__img--cover" style src="<privacy-removed>">
<img class="v-img__img v-img__img--cover" style="" src="<privacy-removed>">
  - rendered on server: draggable="true"
  - expected on client: draggable=""
In total I have 14 warn messages in that page.

I am trying to reproduce the same in the following page, but it is working fine there. This is so weird. https://stackblitz.com/edit/nuxt-starter-14rqc1

And then, here is the example from @migueabellan bumped to the latest version that still fails with the following warn: [Vue warn]: Hydration style mismatch on https://stackblitz.com/edit/nuxt-starter-lunnwj

Hope this can help, sorry for tagging @yyx990803 As the issue is closed, I don't know any other way to keep this conversation.

While writing I see other issue being created: #10069

Okay, of all these alerts, the first one has disappeared, but both the for="" and the draggable="" still appear.

Same with this example: https://stackblitz.com/edit/nuxt-starter-lunnwj

It might be related to what you were saying about the way Vuetify uses the computed values? #10069

I would have to report it directly to Vuetify then or will you keep working to fix it from Vue? It's not clear to me, as the above issue is still open.

Thanks @yyx990803

PP-Tom · 2024-01-12T09:54:25Z

With Nuxt Image I'm getting a lot of hydration errors on the latest Vue (3.4.9)

  - rendered on server: referrerpolicy="undefined"
  - expected on client: referrerpolicy=""
  
  - rendered on server: usemap="undefined"
  - expected on client: usemap=""
  
  - rendered on server: crossorigin="undefined"
  - expected on client: crossorigin=""
  
  - rendered on server: loading="auto"
  - expected on client: loading=""
  
  - rendered on server: decoding="auto"
  - expected on client: decoding=""

With the latest version this isn't fixed however the amount of mismatches have changed. Now I'm getting:

- rendered on server: loading="auto"
- expected on client: loading=""

 - rendered on server: decoding="auto"
- expected on client: decoding=""

yyx990803 · 2024-01-12T14:16:55Z

Should be fixed now by 08b60f5 and released in 3.4.11

Josepdal · 2024-01-12T14:44:23Z

Should be fixed now by 08b60f5 and released in 3.4.11

We are getting close.

ERRORS IN THE PAST:

[Vue warn]: Hydration attribute mismatch on <li class="v-breadcrumbs-item" style>
<li class="v-breadcrumbs-item" style=""></li>
  - rendered on server: icon=""
  - expected on client: icon="[object Object]"

 [Vue warn]: Hydration attribute mismatch on <label class="v-label v-field-label" style for="input-13">
 <label class="v-label v-field-label" style="" for="input-13"></label>
  - rendered on server: for="input-13"
  - expected on client: for="input-16"

For this one I have many warns up to input-27

[Vue warn]: Hydration attribute mismatch on <img class="v-img__img v-img__img--cover" style src="<privacy-removed>">
<img class="v-img__img v-img__img--cover" style="" src="<privacy-removed>">
  - rendered on server: draggable="true"
  - expected on client: draggable=""

Icon and draggable ones have been fixed.

CURRENT ERRORS:

 [Vue warn]: Hydration attribute mismatch on <label class="v-label v-field-label" style for="input-13">
 <label class="v-label v-field-label" style="" for="input-13"></label>
  - rendered on server: for="input-13"
  - expected on client: for="input-16"

Also, the z-index Vuetify warn still showing up, don't know who's fault is:
Repro: https://stackblitz.com/edit/nuxt-starter-lunnwj

NEW ERRORS:

[Vue warn]: Unhandled error during execution of app errorHandler
Uncaught (in promise) Maximum recursive updates exceeded in component <VSliderThumb>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

Thanks.

Josepdal · 2024-01-13T10:30:30Z

UPDATE

New errors have been fixed in v3.4.13 ✅

CURRENT ERRORS:

 [Vue warn]: Hydration attribute mismatch on <label class="v-label v-field-label" style for="input-13">
 <label class="v-label v-field-label" style="" for="input-13"></label>
  - rendered on server: for="input-13"
  - expected on client: for="input-16"

Also, the z-index Vuetify warn reproduction:
Repro: https://stackblitz.com/edit/nuxt-starter-lunnwj

Probably both of them related. I still don't know if it's a problem with Vue or Vuetify.

PP-Tom · 2024-01-14T16:22:37Z

In the latest update I'm getting hydration errors on how whitespace is handled

- rendered on server: "\n\t\t\tAll\n\t\t"
- expected on client: "\r\n\t\t\tAll\r\n\t\t"

My vue settings for whitespace are as follows:

vue: {
	compilerOptions: {
		whitespace: 'preserve'
	}
}

champ7champ · 2024-01-14T19:10:11Z

nuxt-aos lib same ploblem....

Josepdal mentioned this issue Jan 9, 2024

[Bug Report][3.4.9] Hydration class mismatch on VslideGroup, VNavigationDrawer vuetifyjs/vuetify#19002

Closed

Josepdal closed this as completed Jan 9, 2024

Josepdal reopened this Jan 10, 2024

Josepdal changed the title ~~Hydration class mismatch on VslideGroup, VNavigationDrawer~~ Hydration class/style/attr mismatch on SSR components Jan 10, 2024

yyx990803 closed this as completed Jan 10, 2024

yyx990803 reopened this Jan 10, 2024

yyx990803 closed this as completed Jan 10, 2024

github-actions bot locked and limited conversation to collaborators Jan 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hydration class/style/attr mismatch on SSR components #10051

Hydration class/style/attr mismatch on SSR components #10051

Josepdal commented Jan 9, 2024 •

edited

Loading

Josepdal commented Jan 10, 2024

Josepdal commented Jan 10, 2024 •

edited

Loading

yyx990803 commented Jan 10, 2024 •

edited

Loading

yyx990803 commented Jan 10, 2024

yyx990803 commented Jan 10, 2024

Josepdal commented Jan 10, 2024

pjninnim commented Jan 11, 2024

pjninnim commented Jan 11, 2024

PP-Tom commented Jan 11, 2024 •

edited

Loading

Josepdal commented Jan 11, 2024 •

edited

Loading

yyx990803 commented Jan 11, 2024

Josepdal commented Jan 11, 2024

PP-Tom commented Jan 12, 2024

yyx990803 commented Jan 12, 2024

Josepdal commented Jan 12, 2024

Josepdal commented Jan 13, 2024

PP-Tom commented Jan 14, 2024

champ7champ commented Jan 14, 2024

Hydration class/style/attr mismatch on SSR components #10051

Hydration class/style/attr mismatch on SSR components #10051

Comments

Josepdal commented Jan 9, 2024 • edited Loading

Vue version

Link to minimal reproduction

Steps to reproduce

What is expected?

What is actually happening?

System Info

Any additional comments?

Josepdal commented Jan 10, 2024

Josepdal commented Jan 10, 2024 • edited Loading

yyx990803 commented Jan 10, 2024 • edited Loading

yyx990803 commented Jan 10, 2024

yyx990803 commented Jan 10, 2024

Josepdal commented Jan 10, 2024

pjninnim commented Jan 11, 2024

pjninnim commented Jan 11, 2024

PP-Tom commented Jan 11, 2024 • edited Loading

Josepdal commented Jan 11, 2024 • edited Loading

yyx990803 commented Jan 11, 2024

Josepdal commented Jan 11, 2024

PP-Tom commented Jan 12, 2024

yyx990803 commented Jan 12, 2024

Josepdal commented Jan 12, 2024

Josepdal commented Jan 13, 2024

PP-Tom commented Jan 14, 2024

champ7champ commented Jan 14, 2024

Josepdal commented Jan 9, 2024 •

edited

Loading

Josepdal commented Jan 10, 2024 •

edited

Loading

yyx990803 commented Jan 10, 2024 •

edited

Loading

PP-Tom commented Jan 11, 2024 •

edited

Loading

Josepdal commented Jan 11, 2024 •

edited

Loading