Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

nuxt3 issues #1202

Closed
jiblett1000 opened this issue Mar 7, 2022 · 4 comments
Closed

nuxt3 issues #1202

jiblett1000 opened this issue Mar 7, 2022 · 4 comments
Assignees
@RobinMalfait

Comments

@jiblett1000
Copy link

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.5.0

What browser are you using?

Chrome, Firefox

Reproduction URL

https://github.com/jiblett1000/listbox-test

Describe your issue

Various issues on a fresh install using nuxt3 (v3.0.0-27439932.78761c2).

[Vue warn]: provide() can only be used inside setup().
[Vue warn]: provide() can only be used inside setup().
[Vue warn]: inject() can only be used inside setup() or functional components.
TypeError: Cannot read properties of undefined (reading 'listboxState')
    at Proxy.<anonymous> (file:///home/worm/listbox-test/.output/server/node_modules/@headlessui/vue/dist/headlessui.esm.js:4:27645)
    at renderComponentRoot (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:2378:44)
    at renderComponentSubTree (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9930:51)
    at renderComponentVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9869:16)
    at renderVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9965:22)
    at renderVNodeChildren (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9980:9)
    at renderElementVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:10031:17)
    at renderVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9962:17)
    at renderComponentSubTree (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9930:13)
    at renderComponentVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9869:16)
[Vue warn]: inject() can only be used inside setup() or functional components.
TypeError: Cannot read properties of undefined (reading 'buttonRef')
    at setup (file:///home/worm/listbox-test/.output/server/node_modules/@headlessui/vue/dist/headlessui.esm.js:4:28720)
    at callWithErrorHandling (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:1957:22)
    at setupStatefulComponent (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:7517:29)
    at setupComponent (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:7498:11)
    at renderComponentVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9853:17)
    at renderVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9965:22)
    at renderVNodeChildren (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9980:9)
    at renderElementVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:10031:17)
    at renderVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9962:17)
    at renderVNodeChildren (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9980:9)
[Vue warn]: Component ListboxButton  is missing template or render function.
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
TypeError: Cannot read properties of undefined (reading 'listboxState')
    at Proxy.<anonymous> (file:///home/worm/listbox-test/.output/server/node_modules/@headlessui/vue/dist/headlessui.esm.js:4:30755)
    at renderComponentRoot (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:2378:44)
    at renderComponentSubTree (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9930:51)
    at renderComponentVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9869:16)
    at renderVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9965:22)
    at renderComponentSubTree (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9930:13)
    at renderComponentVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9869:16)
    at renderVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9965:22)
    at renderComponentSubTree (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9876:9)
    at renderComponentVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9869:16)
[Vue warn]: provide() can only be used inside setup().
[Vue warn]: provide() can only be used inside setup().
[Vue warn]: inject() can only be used inside setup() or functional components.
TypeError: Cannot read properties of undefined (reading 'listboxState')
    at Proxy.<anonymous> (file:///home/worm/listbox-test/.output/server/node_modules/@headlessui/vue/dist/headlessui.esm.js:4:27645)
    at renderComponentRoot (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:2378:44)
    at renderComponentSubTree (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9930:51)
    at renderComponentVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9869:16)
    at renderVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9965:22)
    at renderVNodeChildren (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9980:9)
    at renderElementVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:10031:17)
    at renderVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9962:17)
    at renderComponentSubTree (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9930:13)
    at renderComponentVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9869:16)
[Vue warn]: inject() can only be used inside setup() or functional components.
TypeError: Cannot read properties of undefined (reading 'buttonRef')
    at setup (file:///home/worm/listbox-test/.output/server/node_modules/@headlessui/vue/dist/headlessui.esm.js:4:28720)
    at callWithErrorHandling (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:1957:22)
    at setupStatefulComponent (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:7517:29)
    at setupComponent (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:7498:11)
    at renderComponentVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9853:17)
    at renderVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9965:22)
    at renderVNodeChildren (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9980:9)
    at renderElementVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:10031:17)
    at renderVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9962:17)
    at renderVNodeChildren (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9980:9)
[Vue warn]: Component ListboxButton  is missing template or render function.
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: inject() can only be used inside setup() or functional components.
TypeError: Cannot read properties of undefined (reading 'listboxState')
    at Proxy.<anonymous> (file:///home/worm/listbox-test/.output/server/node_modules/@headlessui/vue/dist/headlessui.esm.js:4:30755)
    at renderComponentRoot (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:2378:44)
    at renderComponentSubTree (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9930:51)
    at renderComponentVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9869:16)
    at renderVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9965:22)
    at renderComponentSubTree (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9930:13)
    at renderComponentVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9869:16)
    at renderVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9965:22)
    at renderComponentSubTree (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9876:9)
    at renderComponentVNode (file:///home/worm/listbox-test/.output/server/chunks/index.mjs:9869:16)
@RobinMalfait
Copy link
Member

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should have already been fixed. With the repro you shared I can't reproduce this:
image

Make sure that you remove any caches:

rm -rf .nuxt .output node_modules
yarn

And try again, that should fix those issues.

@RobinMalfait RobinMalfait self-assigned this Mar 7, 2022
@jiblett1000
Copy link
Author

@RobinMalfait Sorry, that didn't do the trick on my end. I realized I forgot to mention this happens after build (when accessing in browser) not during dev.

@RobinMalfait
Copy link
Member

Aha I see what you mean. This is unfortunately a Nuxt issue and not a Headless UI issue.
We had a similar issue report recently, some more information can be found here #982 (comment)

@jiblett1000
Copy link
Author

Got it. Thanks for the link!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@RobinMalfait RobinMalfait

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jiblett1000 @RobinMalfait