Hydration attribute mismatch after update Nuxt to v3.9.0

[ivan-mihalic]

Environment

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.9.0
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: yarn@1.22.19
• Builder: -
• User Config: devtools, modules, ui
• Runtime Modules: @nuxt/ui@2.11.1
• Build Modules: -

Version

v2.11.1

Reproduction

https://stackblitz.com/edit/nuxt-starter-5tmfpt?file=components%2FUserForm.vue

Description

Hi guys,
I updated Nuxt to version 3.9.0 and I am getting Hydration attribute mismatch for example on USelectMenu or UDropdown viz screenshot. I think it is a bug and it is now showing after improve ssr hydration mismatch checks in Vue 3.4.

Additional context

No response

Logs

No response

[MickL]

I do have the same issue

[hoanghadu]

I have the same issue

[ellellie]

Also occurring with UCheckbox, here's a minimal reproduction (app.vue):

<template>
  <UCheckbox v-model="state" label="Test checkbox" />
</template>

<script setup lang="ts">
const state = ref(true)
</script>

Notably does not occur when the ref is false.

Testing against 2.11.1 and 7151b7b with nuxt@3.9.0 both yield the same result.

[pixelpaulaus]

getting same things now after the update

[tabuz]

I also got plenty of hydration mismatch after upgrade.

[fishDev94]

same bug but without info after upgrade to 3.9.0
I tried with --no-force and --force and i have the same issue

[ahoiroman]

Same here with ui-pro/landing template

[benjamincanac]

I think this is due to latest vue 3.4, we have to override all of Headless UI generated ids with the future useId composable from Nuxt: nuxt/nuxt#23368 but it hasn't been released yet.

In the meantime, can you try to set the resolution to vue to 3.3.13?

[yoricktran]

I think this is due to latest vue 3.4, we have to override all of Headless UI generated ids with the future useId composable from Nuxt: nuxt/nuxt#23368 but it hasn't been released yet.

In the meantime, can you try to set the resolution to vue to 3.3.13?

3.3.13 fixed it for me for now, thanks!

[whcxxb]

Nuxt3.9.1 still has this problem and 3.3.13 can solve it

[tabuz]

Sorry for anoob question, but how did you achieved to pin vue@3.3.13?

My package.json looks like below

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/ui": "^2.11.0",
    "@nuxtjs/google-fonts": "^3.1.0",
    "@pinia/nuxt": "^0.5.1",
    "consola": "^3.2.3",
    "nuxt-proxy": "^0.4.1",
    "pinia": "^2.1.7",
    "sass": "^1.69.5",
    "vue": "^3.3.9",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@iconify/vue": "^4.1.1",
    "@nuxt/devtools": "^1.0.3",
    "@nuxtjs/i18n": "^8.0.0-rc.5",
    "@vueuse/core": "^10.6.1",
    "@vueuse/nuxt": "^10.6.1",
    "nuxt": "^3.9.0",
    "prettier": "^3.1.0",
    "prettier-plugin-tailwindcss": "^0.5.7"
  }
}

[benjamincanac]

You need to set it in resolutions:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/ui": "^2.11.0",
    "@nuxtjs/google-fonts": "^3.1.0",
    "@pinia/nuxt": "^0.5.1",
    "consola": "^3.2.3",
    "nuxt-proxy": "^0.4.1",
    "pinia": "^2.1.7",
    "sass": "^1.69.5",
    "vue": "^3.3.9",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@iconify/vue": "^4.1.1",
    "@nuxt/devtools": "^1.0.3",
    "@nuxtjs/i18n": "^8.0.0-rc.5",
    "@vueuse/core": "^10.6.1",
    "@vueuse/nuxt": "^10.6.1",
    "nuxt": "^3.9.0",
    "prettier": "^3.1.0",
    "prettier-plugin-tailwindcss": "^0.5.7"
  },
  "resolutions": {
    "vue": "3.3.13"
  }
}

[tabuz]

@benjamincanac Thank you for quick reply. I've tried what you suggested and while executing npm list vue is shows as vue@3.4.5 deduped everywhere and app itself still throws hydration mismatch.

npm package.json docs doesnt mention usage of keyword resolutions. Should I use this package https://www.npmjs.com/package/npm-force-resolutions ?

[benjamincanac]

Oh sorry, this is for yarn and pnpm. It seems you can use overrides with npm since 8.3.0.

[lammerfalcon]

i have the same issue with UTable - hydration mistmaches - warning on UCheckbox inside table component
really dont want to downgrade versions(( any info when we can get update?

[dolbex]

This seems related as well. See the following reproduction:

https://stackblitz.com/edit/nuxt-starter-t3xebe?file=components%2FAttributeTest.vue

I have a form with a dynamic action attribute. I even understand the hydration attr mismatch but why is the value wrong on initial load. It should have loaded with "something" and then changed to the clientside date/time. It can change based on the button click. This was unexpected for us.

[RomanSkrypnik]

I'm facing the same issue

[sync42johnny]

i do have the same issue -\^-^/-

[jontybrook]

Ditto here.. causing all sorts of mismatches with a whole bunch of deps (headless, radix, etc etc). Think the best fix is upstream in vue?

I'm using Bun, which supports both the overrides and resolutions syntax. So the temporary solution for me is in package.json:

"overrides": { "vue": "3.3.13" },

[0216lt]

Nuxt3.9.1仍然有这个问题，3.3.13可以解决

所以是要降低版本来解决这个问题吗

[0216lt]

同样发生在UCheckbox，这里是一个最小的复制（app.vue）：

<template>
  <UCheckbox v-model="state" label="Test checkbox" />
</template>

<script setup lang="ts">
const state = ref(true)
</script>

值得注意的是，当 ref 为 false 时不会发生。

针对 2.11.1 和7151b7b进行的测试均nuxt@3.9.0产生相同的结果。

问题解决了吗

[benjamincanac]

It seems Vue will have its own useId composable in 3.5: https://twitter.com/youyuxi/status/1745379112456429688.

[cco3]

I get the sense you all already understand the root issue, but sense I haven't seen anyone mention it, I'm also seeing this with UTabs.

[joeldegerman99]

I have the same issue with UDropdown

[iyefreedy]

I have the same issue with UDropdown

Nuxt Version: 3.9.3
Nuxt UI Version: 2.11.1

[marcobax]

The same issue occurs with Popoverbutton too

Nuxt Version: 3.9.3
Headlessui UI Version: 1.7.16

[benjamincanac]

Those warnings will appear for the all components using Headless UI underneath. The only fix for now is to pin vue to 3.3.13 while waiting for Vue 3.5 and its useId composable.

Those hydration issues were already present but only displayed since Vue 3.4.

[zacwebb]

Nuxt has shipped a useId composable in 3.10.0 👀

[ybw0014]

#1211

[abyshake-anand]

Seeing the same issue...
Using UDropdown

• Nuxt ^3.9.3
• vue ^3.3.13

"resolutions": {
"vue": "3.3.13"
}

[pedrodruviaro]

Same issue with a lot of NuxtUi componentes... even with the "resolutions" option

[madebyfabian]

Even after overriding, these issues still persist. Not sure if I've done it right though. I am using pnpm- Tested overrides, resolutions and pnpm.overrides

[dandonovan78]

I had a bit of trouble overriding the version with npm, causing some dependency issues. After some fiddling, adding an override specifically for nuxt seems to work to set the vue version to 3.3.13 and also eliminates the hydration mismatch errors:

"overrides": {
    "nuxt": {
      "vue": "3.3.13"
    },
  },

[Poraksis]

"dependencies": {
"flowbite": "^2.2.1",
"nuxt": "^3.10.1",
"vue": "^3.4.15",
"vue-router": "^4.2.5"
}

i have so much hydration mismatch errors so just removed nuxt ui kit, any suggestion ?

[benjamincanac]

@Poraksis There are already tons of comments in this issue answering that already: #1171 (comment)

This issue has already been solved and will be released this week in v2.14.0.

[m0k99]

I have the same issue

[benjamincanac]

@m0k99 Do you still encounter this issue with https://github.com/nuxt/ui/releases/tag/v2.14.0?

[m0k99]

@m0k99 Do you still encounter this issue with https://github.com/nuxt/ui/releases/tag/v2.14.0?
in my project, I don't use NuxtUI and I write randomId in utils and use that in my component and get the following error:

• Operating System: Linux
• Nuxt Version: 3.9.0
• Vue Version: 3.4.14

[cco3]

I don't use NuxtUI

This issue is about NuxtUI. If you are getting hydration mismatches without NuxtUI, it's a different problem.

I write randomId in utils

If you use a random ID in your component, what is generated on the server will differ from what's generated in the client. Naturally, you will have a hydration mismatch. You can fix this by not using a random ID.

[Muslihiddin]

I'm getting this warning on checkbox, but only when I reload page and checkbox is used on that page. And

    "resolutions": {
        "vue": "3.3.13"
    } 

didn't help either

[noook]

I think checkboxes have been fixed recently and not released yet

#1495

[pixelpaulaus]

Hmmm, though this was fixed in v2.14.0, but am I mistaken?
As I seem to be getting the same errors on UI Buttons with the following versions...

├── @headlessui/vue@1.7.20
├── @heroicons/vue@2.1.3
├── @nuxt/devtools@1.2.0
├── @nuxt/eslint-config@0.2.0
├── @nuxt/image@1.6.0
├── @nuxt/ui@2.15.2
├── @nuxtjs/tailwindcss@6.12.0
├── @pinia/nuxt@0.5.1
├── @silvermine/videojs-quality-selector@1.3.1
├── eslint-plugin-tailwindcss@3.15.1
├── eslint@8.57.0
├── file-saver@2.0.5
├── nuxt-delay-hydration@1.3.3
├── nuxt@3.11.2
├── pinia@2.1.7
├── rollup-plugin-cleanup@3.2.1
├── sass@1.75.0
├── unhead@1.9.7
├── video.js@8.10.0
├── vite-plugin-string-replace@1.1.2
├── vue-eslint-parser@9.4.2
├── vue-router@4.3.2
├── vue@3.4.25
└── yup@1.4.0

[lafllamme]

Any updates on this? Keep getting hydration issues for <USelectMenu> and <UInput>.

Package json:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "prepare": "nuxt prepare",
    "playwright": "pnpm exec playwright install && pnpm exec playwright install-deps",
    "postinstall": "npm run prepare"
  },
  "dependencies": {
    "@nuxt/image": "^1.7.0",
    "@nuxt/ui": "^2.17.0",
    "@pinia/nuxt": "^0.5.1",
    "@sparticuz/chromium": "^126.0.0",
    "@unocss/reset": "^0.58.9",
    "axios": "^1.7.2",
    "chromium": "^3.0.3",
    "jsdom": "^24.1.0",
    "nuxt": "^3.12.2",
    "nuxt-viewport": "^2.1.5",
    "pinia": "^2.1.7",
    "playwright": "^1.45.2",
    "std-env": "^3.7.0",
    "vue": "^3.4.31",
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
    "@iconify-json/ph": "^1.1.13",
    "@nuxtjs/supabase": "^1.2.2",
    "@types/jsdom": "^21.1.7",
    "@unocss/nuxt": "^0.58.9",
    "@unocss/preset-icons": "^0.58.9",
    "@unocss/preset-web-fonts": "^0.58.9",
    "@zadigetvoltaire/nuxt-gtm": "^0.0.13",
    "sass": "^1.77.6"
  }
}

Message:

[Vue warn]: Hydration attribute mismatch on 
<button class="relative w-full disabled…-400 dark:text-gray-500" type="button"> 
  - rendered on server: (not rendered)
  - expected on client: disabled="true"
  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 <ComboboxButton ref="trigger" as="div" role="button"  ... > 
  at <Combobox by=undefined name=undefined model-value=null  ... > 
  at <SelectMenu ref="chapterMenu" option-attribute="name" value-attribute="name" 

[benjamincanac]

@lafllamme This issue should have been fixed a long time ago. Please open a new one with a reproduction.