P4sca1/nuxt-headlessui

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

Closed this issue · 25 comments

IzakJackson commented

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 commented

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

IzakJackson commented

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."
  • 👍1
P4sca1 commented

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

  • 👍1
agracia-foticos commented

Same issue!

P4sca1 commented

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

  • 👍1
agracia-foticos commented

@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 commented

@P4sca1 any advance?

P4sca1 commented

@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 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 nuxt/nuxt#27378.
agracia-foticos commented

@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:

I remove Lazy and use the composable and works

  • 👍1
P4sca1 commented

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 commented

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 commented

@P4sca1 johannschopplich/nuxt-vitalizer#3 (comment) can you do anything with this comment??? Thanks in advance :)

P4sca1 commented

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.

  • 👍1
agracia-foticos commented

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 commented

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

P4sca1 commented

@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 commented

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 commented

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

P4sca1 commented

@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 commented

@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 commented

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

P4sca1 commented

@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 commented

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.

  • 👍1