search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

Cannot read properties of undefined (reading '0') when ussing in Nuxt 3 with nuxt headlessui component #3463

Closed agracia-foticos closed 2 weeks ago

agracia-foticos commented 3 weeks ago

We are ussing Nuxt What package within Headless UI are you using?

For example: @headlessui/vue

What version of that package are you using?

"Cannot read properties of undefined (reading '0')

What browser are you using?

Chrome

Describe your issue

stack: '

at useId (/home/business/var/www/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1447:63)\n' +
'at setup (/home/business/var/www/node_modules/@headlessui/vue/dist/components/disclosure/disclosure.js:1:1143)\n' +
'at callWithErrorHandling (./node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:203:19)\n' +
'at setupStatefulComponent (./node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7668:25)\n' +
'at setupComponent (./node_modules/vue/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7629:36)\n' +
'at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:636:15)\n' +
'at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:84:10)\n' +
'at _sfc_ssrRender (./src/components/Page/Header/Promotion.vue:76:34)\n' +
'at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:710:9)\n' +
'at ./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:652:25
'

agracia-foticos commented 3 weeks ago

In client image

RobinMalfait commented 2 weeks ago

Hey!

We rely on the native useId hook if it's available. If it's not available, then our implementation of the useId hook will be used. It looks like you are using the built-in one.

Can you try and upgrade both Nuxt and Vue to the latest version and see if that solves the issue for you?

agracia-foticos commented 2 weeks ago

@RobinMalfait I don't know what happened, I tried on another machine, reinstalling all the node_modules and now it works for me. Could it be npm/yarn issue?

RobinMalfait commented 2 weeks ago

@agracia-foticos My guess is that node_modules ended up in a weird state. Removing node_modules and re-installing typically does the trick. Another potential issue is stale caches. Most of them are stored in node_modules as well so a clean install should do the trick.

In case of Nuxt, this might help: https://nuxt.com/docs/api/commands/cleanup

Can you verify if that worked on your main machine?

agracia-foticos commented 2 weeks ago

@RobinMalfait now its all works. Thanks!