[Bug]: shadcn-nuxt produces hydration warnings for some components

[e-tho]

Environment

Developement/Production OS: NixOS 24.05.20240106.46ae021 (Uakari) x86_64
Node version: 21.1.0
Package manager: npm@10.2.0
Radix Vue version: 1.2.7
Shadcn Nuxt version: 0.8.6
Vue version: 3.4.7
Nuxt version: 3.9.1
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.4.1
Client OS: NixOS 24.05.20240106.46ae021 (Uakari) x86_64
Browser: Firefox 121.0

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-rgoa7e?file=pages%2Findex.vue

Steps to reproduce

Install and set up shadcn-nuxt with <Accordion> and <Button> components.

Describe the bug

Since 0.8.6 some components in my project such as <Button>, <AccordionTrigger> and <AccordionContent> produce these SSR-related warnings.

[Vue warn]: Hydration attribute mismatch on ...
- rendered on server: id="radix-75"
- expected on client: id="radix-1"
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. 
...

I tried initializing shadcn-vue again, deleting node_modules and package-lock.json and reinstalling the project, but nothing helped. It seems to come from the version of radix-vue used by shadcn-nuxt.

Expected behavior

No response

Conext & Screenshots (if applicable)

No response

[MuhammadM1998]

This issue is not on your end. It appeared after Vue 3.4 as it now checks for hydration mismatches in attributes. This also happens in Nuxt UI for example. There's a PR that introduces new useId composable that generates SSR friendly id (Stays the same on server & client) which will solve this issue. Maybe something similar needs to be ported to shadcn vue

[sadeghbarati]

unovue/reka-ui#558 (reply in thread)

[jontybrook]

I'm also seeing this. Temporary solution for me was to pin vue to 3.3.13...

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

[valh1996]

I'm also seeing this. Temporary solution for me was to pin vue to 3.3.13...

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

It doesn't fix the problem, it just hides the warnings. The problem remains the same. A useId() hook should appear in version 3.5 of vue, making it easier to correct the problem.

[beejaz]

Seems there was a useId() added for nuxt 3.10

https://nuxt.com/blog/v3-10#ssr-safe-accessible-unique-id-creation

[mathieumagalhaes]

This seems to happen with the auto imported component.
Not with a manual imported component.

I've reported this to the Nuxt repo aswell with reproduction link: nuxt/nuxt#25696

[peterhijma]

I had the same problem with the form example. Fixed this case locally inside FormItem.vue by removing the import from radix-vue, so it uses the one from Nuxt automatically:

<script lang="ts" setup>
import { provide } from 'vue'
import { useId } from 'radix-vue'  <-- remove this one
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

const id = useId()
provide(FORM_ITEM_INJECTION_KEY, id)
</script>

[mathieumagalhaes]

I had the same problem with the form example. Fixed this case locally inside FormItem.vue by removing the import from radix-vue, so it uses the one from Nuxt automatically:

import { useId } from 'radix-vue'  <-- remove this one

This might be a solution for Form components, but I still have issues with plain components (auto imported).
Example with Progress component, described in: nuxt/nuxt#25696

[MercurialUroboros]

I'd like to point out that the solution @peterhijma works for Form 🙏 .
Although I have the same issue on DropDownMenu, and it seems that i can't apply the same fix.

[MuhammadM1998]

@MercurialUroboros Try this #637 (comment) in your app.vue

[mathieumagalhaes]

@MercurialUroboros @MuhammadM1998 Did you have any issue with components like the Progress component?
As described in nuxt/nuxt#25696
I'm still having hydration warnings even though there is no use of useId() in these components

[SuperKojima]

Thank you!!

[maikeleckelboom]

Over the past six months, I’ve extensively used Shadcn and tested nearly every component. While the useId() fix for Nuxt has resolved most hydration issues, I’m still encountering a Vue hydration error with the Menubar component.

I’ve tried various approaches to address this, but the issue persists. I’m not aware of any current workarounds.

[Rettend]

using shadcn components with client:load in Astro produces the same hydration errors as well

[michaelsieminski]

im also using shadcn-vue with Nuxt and implemented the ssr hydration fix with useId() but for me it's still throwing hydration errors using the Navigation Menu with Nuxt links

[Azurox]

Also happens with the accordion component

- rendered on server: id="radix-vue-accordion-trigger-11"
- expected on client: id="radix-vue-accordion-trigger-2"

[ivan-angjelkoski]

having this same issue, even if i use a custom useId() in nuxt 3...

<script>
const myUseId = () => useId()
</script>

<template>
<ConfigProvider :use-id="myUseId">
</template>

i guess this can be fixed now with vue 3.5? it features a new useId.

[alan-bevz]

Has anyone resolved the current issue after the release of Vue 3.5?

I'm currently using:

"nuxt": "^3.13.1",
"radix-vue": "^1.9.5",
"shadcn-nuxt": "^0.10.4",
"vue": "^3.5.4"

I tried the option of using <ConfigProvider :use-id="() => useId() ?? ''">. It partially helped: errors disappeared from the browser console,
but they remain in the VSCode terminal.

As I understand, the errors are occurring due to the use of Devtools. Is there a way to resolve them without disabling Devtools?

[ivan-angjelkoski]

@alan-bevz
you need to use the use id in setup, you cant use it in a template. example:

<script setup>
import {useId} from 'vue'.  // Note: you need vue 3.5
const myUseId = () => useId() || ''
</script>

<template>
<ConfigProvider :use-id="myUseId">
...
</template>

[alan-bevz]

@ivan-angjelkoski
Thank you for your response.
I tried it, but it didn’t help.
However, I think I found the answer to my question here: nuxt/nuxt#28901.
As I understand it, my issue will be resolved in Nuxt version 3.13.2.

[genu]

Testing in Nuxt 3.13.2 I still see the console warnings. Did 3.12.2 make the warnings go away for anybody?

[sadeghbarati]

Testing in Nuxt 3.13.2 I still see the console warnings. Did 3.12.2 make the warnings go away for anybody?

radix-vue is still not refactored to use Vue useId. That is why we still have these warnings

[kkukelka]

Testing in Nuxt 3.13.2 I still see the console warnings. Did 3.12.2 make the warnings go away for anybody?

radix-vue is still not refactored to use Vue useId. That is why we still have these warnings

it is as of today unovue/reka-ui@20a755e 🎉
release still outstanding though

[alan-bevz]

Testing in Nuxt 3.13.2 I still see the console warnings. Did 3.12.2 make the warnings go away for anybody?

Yes, I made a mistake and misunderstood the fix.
The errors have not disappeared.

[bennyzen]

I'm using the latest radix-vue@1.9.6 released yesterday and the problem still seems to persist, even after the above mentioned commit got merged.

[premdasvm]

Having the same issue with dropdown, any solutions ?

[Sngt25]

I'd like to point out that the solution @peterhijma works for Form 🙏 . Although I have the same issue on DropDownMenu, and it seems that i can't apply the same fix.

Having the same issue with dropdown, any solutions ?

For those who have encountered hydration errors in the DropdownMenu component, try adding the as-child prop to the trigger.

  <DropdownMenuTrigger as-child>
              <Avatar>
                <AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
                <AvatarFallback>CN</AvatarFallback>
              </Avatar>
  </DropdownMenuTrigger>

[kingrea]

Hey, for anyone that is having this problem - just as a note.
The config provider needs to wrap a single root element.

I was having issues with:

<ConfigProvider :use-id="ssrId">
  <div v-if="error">...</div>
  <NuxtLayout v-else>
    <NuxtPage></NuxtPage>
  </NuxtLayout> 
</ConfigProvider>

When what worked was moving the div into the layout:

<ConfigProvider :use-id="ssrId">
  <NuxtLayout>
   <div v-if="error">...</div>
    <NuxtPage v-else></NuxtPage>
  </NuxtLayout> 
</ConfigProvider>