Error: provideHeadlessUseId(() => useId());

[IzakJackson]

I get this error: 500 useId is not defined

When using: provideHeadlessUseId(() => useId()); in app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
provideHeadlessUseId(() => useId());
</script>

[P4sca1]

Which version of nuxt are you using? Nuxt Version 3.10.0 or newer is required for the useId() composable.

[IzakJackson]

I was on 3.9.2 and just updated to latest. All working now, but it appears I'm still getting hydration errors:

[Warning] warn [Vue warn]: Hydration attribute mismatch on (135) (browser.mjs, line 44)
  - rendered on server: id=\"headlessui-radiogroup-option-nE3KxD8SGyR-8\"
  - expected on client: id=\"headlessui-radiogroup-option-9\"
  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."

[P4sca1]

Interesting. Did you try restarting nuxt and clearing the website cache? If the problem still persists, could you share a reproduction please?

[agracia-foticos]

Same issue!

[P4sca1]

@agracia-foticos Please provide a reproduction, so that I can debug the issue.

[agracia-foticos]

@agracia-foticos Please provide a reproduction, so that I can debug the issue.

@P4sca1 here you are https://stackblitz.com/edit/nuxt-starter-zc7r2b

[agracia-foticos]

@P4sca1 any advance?

[P4sca1]

@agracia-foticos You forgot to actually provide the id. Add the following to your app.vue file:

<script setup lang="ts">
  provideHeadlessUseId(() => useId())
</script>

Some things to consider:

• Ensure you are using a signle root element. See https://github.com/nuxt/nuxt/pull/26315.
• Using LazyHeadlessPopover does not work. Use HeadlessPopover instead. This might apply to other components too. You will get a hydration missmatch where the id often looks similar, but uses a _ instead of a - for example. See https://github.com/nuxt/nuxt/issues/27378.

[agracia-foticos]

@agracia-foticos You forgot to actually provide the id. Add the following to your app.vue file:

<script setup lang="ts">
  provideHeadlessUseId(() => useId())
</script>

Some things to consider:

• Ensure you are using a signle root element. See fix(nuxt): useId() causing hydration-error when using value multiple times nuxt/nuxt#26315.
• Using LazyHeadlessPopover does not work. Use HeadlessPopover instead. This might apply to other components too. You will get a hydration missmatch where the id often looks similar, but uses a _ instead of a - for example. See useId hydration mismatch when used in a dynamic global component nuxt/nuxt#27378.

I remove Lazy and use the composable and works

[agracia-foticos]

@P4sca1

I added to the project a DelayHydration https://github.com/johannschopplich/nuxt-vitalizer?tab=readme-ov-file#delayhydration and raises again the error

Please check https://stackblitz.com/edit/nuxt-starter-zc7r2b

[P4sca1]

I don't think that this is an issue with nuxt-headlessui and I can't provide support for third-party libraries. Please open an issue at their repository.

[agracia-foticos]

I don't think that this is an issue with nuxt-headlessui and I can't provide support for third-party libraries. Please open an issue at their repository.

Thanks, i open the issue to nuxt vitalizer! Regards

[agracia-foticos]

@P4sca1 https://github.com/johannschopplich/nuxt-vitalizer/issues/3#issuecomment-2219673068 can you do anything with this comment??? Thanks in advance :)

[P4sca1]

Not before the issues with ID generation are resolved. Maybe Vue 3.5 will help here, as it is rumored to contain a native useId hook.

[agracia-foticos]

Not before the issues with ID generation are resolved. Maybe Vue 3.5 will help here, as it is rumored to contain a native useId hook.

I wait for Vue 3.5, thanks!!! :)

[agracia-foticos]

@P4sca1 https://github.com/nuxt/nuxt/pull/28285 can you upgrade this module??? :D

[P4sca1]

@P4sca1 nuxt/nuxt#28285 can you upgrade this module??? :D

There is nothing that needs to be changed in this module. Your existing code continues to work. When you upgrade nuxt it will use useId from vue instead of the custom implementation. @headlessui/vue could update their code to use useId from vue if no custom function was provided. That way provideHeadlessUseId would no longer be needed.

[P4sca1]

See https://github.com/tailwindlabs/headlessui/discussions/3457

[P4sca1]

If you upgrade vue to 3.5.0 or newer and @headlessui/vue to 1.7.23 or newer, nuxt-headlessui will automatically use the native useId function provided by vue. There is no need to update nuxt-headlessui. You can remove provideHeadlessUseId() from your app.vue function. If you keep it, it will just do nothing.

[agracia-foticos]

@P4sca1 i upgrade headless ui and vue 3.5.0 but this console.error persists. any idea?

[P4sca1]

@agracia-foticos Ensure you also use the latest version of nuxt an maybe regenerate your lock file, to avoid having multiple versions of vue installed. If the issue persists, please provide a reproduction.

[agracia-foticos]

@P4sca1 here you are a reproduction https://stackblitz.com/edit/nuxt-starter-zc7r2b

with "nuxt": "3.13.1", "vue": "3.5.4", and "nuxt-headlessui": "^1.2.0"

[MarijnFK]

I think same problem, but from NuxtUI (using ULandingFAQ). Hydration error comes from DisclosureButton

[P4sca1]

@P4sca1 here you are a reproduction https://stackblitz.com/edit/nuxt-starter-zc7r2b

with "nuxt": "3.13.1", "vue": "3.5.4", and "nuxt-headlessui": "^1.2.0"

npm why @headlessui/vue reveals that you are using v1.7.22. Native useId support got introduced in v1.7.23. Once you upgrade the dependency, it works (I confirmed using your reproduction).

I think same problem, but from NuxtUI (using ULandingFAQ). Hydration error comes from DisclosureButton

Please also check if you are using the latest dependency versions. If the problem persists, please provide a reproduction.

[MarijnFK]

turns out i was using a component with headless components and a useAsyncData in the setup, but didn't have await useAsyncData. Therefor the count was wrong.