Nuxt•5mo ago

Headlessui mismatch

- rendered on server: id="headlessui-disclosure-button-35"
  - expected on client: id="headlessui-disclosure-button-3"

- rendered on server: id="headlessui-disclosure-button-35"
  - expected on client: id="headlessui-disclosure-button-3"

any idea on how to solve this error? I'm using headless Disclosure, even when passing a id to it like <DisclosureButton id="foo", I still get the hydration error with the same message

15 Replies

Cue•5mo ago

Are you using SSR-safe id’s for headless? E.g. provideUseId(() => useId())

CakeOP•5mo ago

shouldn't using a hardcoded id (in my case made-to-measure from the sc above) be SSR safe? no idea where those headless generated ids are coming from, since I already have my own id.

Cue•5mo ago

The generated id's come from a headlessui internal function that just increments a variable.

CakeOP•5mo ago

they should'nt be there tho if i'm passing the id?

Cue•5mo ago

No, the id prop you provide is not the same as the generated id used by the state stored in the components context. The generated id therefore is different for server and client in this instance.

CakeOP•5mo ago

when I inspect the DOM i don't see any elements that has either of those ids as u can see in my screenshot the final id is made-to-measure but the warning says otherwise

Cue•5mo ago

That's because you're inspecting the DOM. The state is injected, the generated id used is stored there

CakeOP•5mo ago

what should I do to fix it?

Cue•5mo ago

The id you use, is then set on the client Put this in your app.vue:

<script setup lang="ts">
import { provideUseId } from '@headlessui/vue'

provideUseId(() => useId())
</script>

<script setup lang="ts">
import { provideUseId } from '@headlessui/vue'

provideUseId(() => useId())
</script>

CakeOP•5mo ago

thanks, provideHeadlessUseId seems to work is this mentionned somehwere?

Cue•5mo ago

But also note that Nuxt's useId only works for single root elements. So the documentation shows:

<Disclosure>
  <DisclosureButton />
  <DisclosurePanel />
</Disclosure>

<Disclosure>
  <DisclosureButton />
  <DisclosurePanel />
</Disclosure>

You should change to:

<Disclosure>
  <div>
    <DisclosureButton />
    <DisclosurePanel />
  </div>
</Disclosure>

<Disclosure>
  <div>
    <DisclosureButton />
    <DisclosurePanel />
  </div>
</Disclosure>

It's actually provideUseId, the provideHeadlessUseId is an alias offered by the nuxt-headlessui module.

CakeOP•5mo ago

it's what I'm using and was autoimported for me should I use provideUseId instead?

Cue•5mo ago

No, what your doing is better because of the auto-import. I didn't realise you were using the module. FYI https://github.com/P4sca1/nuxt-headlessui/issues/40

CakeOP•5mo ago

thanks!

Cue•5mo ago

Also: https://github.com/P4sca1/nuxt-headlessui see 3rd step in Quick Setup

Gaming

Programming

Headlessui mismatch