nuxt: HeadlessUI is not working with Nuxt 3

Environment

Nuxt CLI v3.0.0-27313139.1c88580

Reproduction

It works fine with development but when I build nuxt (nuxi build) and start (yarn start) it gives error. I’ve tried to import headless ui component from @headlessui/vue/dist/index.js instead of @headlessui/vue but its still same.

Describe the bug

Headless ui is working just fine on development but it gives error after build and trying to browse.

TypeError: Cannot read property 'buttonRef' of undefined
    at setup (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:2622:15)
    at callWithErrorHandling (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:7158:22)
    at setupStatefulComponent (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:6874:29)
    at setupComponent (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:6855:11)
    at renderComponentVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9757:17)
    at renderVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9863:22)
    at renderVNodeChildren (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9878:9)
    at renderElementVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9929:17)
    at renderVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9860:17)
    at renderVNodeChildren (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9878:9)
[Vue warn]: inject() can only be used inside setup() or functional components.
TypeError: Cannot read property 'menuState' of undefined
    at Proxy.render$1 (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:2522:17)
    at renderComponentRoot (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:2015:44)
    at renderComponentSubTree (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9828:51)
    at renderComponentVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9773:16)
    at renderVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9863:22)
    at renderVNodeChildren (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9878:9)
    at renderElementVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9929:17)
    at renderVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9860:17)
    at renderVNodeChildren (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9878:9)
    at renderElementVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9929:17)
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: Unhandled error during execution of watcher callback
TypeError: Cannot read property 'itemsRef' of undefined
    at ReactiveEffect.fn (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:2685:24)
    at ReactiveEffect.run (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\reactivity\dist\reactivity.cjs.js:164:29)
    at ComputedRefImpl.get value [as value] (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\reactivity\dist\reactivity.cjs.js:1075:39)
    at D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:2336:26
    at callWithErrorHandling (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6615:22)
    at callWithAsyncErrorHandling (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6624:21)
    at ReactiveEffect.getter [as fn] (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6970:24)
    at ReactiveEffect.run (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\reactivity\dist\reactivity.cjs.js:164:29)
    at doWatch (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7078:16)
    at Object.watchEffect (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6890:12)
[Vue warn]: inject() can only be used inside setup() or functional components.
TypeError: Cannot read property 'menuState' of undefined
    at Proxy.render$1 (D:\projects\headless-test\nuxt3-app\.output\server\node_modules\@headlessui\vue\dist\headlessui.cjs.development.js:2656:17)
    at renderComponentRoot (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:2015:44)
    at renderComponentSubTree (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9828:51)
    at renderComponentVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9773:16)
    at renderVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9863:22)
    at renderComponentSubTree (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9828:13)
    at renderComponentVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9773:16)
    at renderVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9863:22)
    at renderComponentSubTree (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9780:9)
    at renderComponentVNode (file:///D:/projects/headless-test/nuxt3-app/.output/server/chunks/index.mjs:9773:16)

Additional context

No response

Logs

No response

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 15 (2 by maintainers)

Most upvoted comments

in nuxt.config adding

build: { transpile: ['@headlessui/vue'] }

solve problem for now

+17

yamin90 on Jan 11, 2022

We (at Tailwind) looked into this issue this morning and this appears, as far as we can tell, to be a Nuxt 3 issue. I’ve seen this issue before when Vue got bundled into the dist files (never made it to a release — was an issue encountered during a build tooling refactor).

With that knowledge I poked around to see if there were two versions of Vue included in the server bundle and it appears there are.

Headless UI imports things from the vue package
Which loads (afaict) .output/server/node_modules/vue/index.mjs
Which delegates to .output/server/node_modules/@vue/runtime-core
Yet, the server has an inlined version of Vue in .output/server/chunks/index.mjs which is separate from the one in node_modules

This separate version of Vue has it’s own currentInstance / currentRenderingInstance and the mismatch will cause those errors to be displayed / reactivity to not work / etc…. I assume (need to test this myself at some point today to verify this) that the reason adding it to build.transpile fixes it is that Headless UI gets inlined in the server chunk and everything resolves properly.

All in all it seems like this is a Nuxt 3 issue — at least as far as we can tell.

+15

thecrypticace on Jan 19, 2023

@thecrypticace is exactly right. At the moment any dependency you have that is importing from vue needs to be added to your build.transpile array so we have the same vue instance. This is technically not a bug but I very much appreciate the inconvenience.

I’ve opened a new issue to follow the potential solutions, including moving vue to an external: https://github.com/nuxt/nuxt.js/issues/13632. Thoughts are certainly welcome.

danielroe on Jan 19, 2023

We now add vue as an external by default. We can track any remaining issues in nuxt/nuxt.js#13632.

danielroe on Jan 19, 2023

@thecrypticace is exactly right. At the moment any dependency you have that is importing from vue needs to be added to your build.transpile array so we have the same vue instance. This is technically not a bug but I very much appreciate the inconvenience.

I’ve opened a new issue to follow the potential solutions, including moving vue to an external: nuxt/nuxt.js#13632. Thoughts are certainly welcome.

This worked for me.

build: {
        transpile: ["@heroicons/vue", "@headlessui/vue"],
    }

FrancoLab on Jan 19, 2023

@lookis Like i said this might be an issue with headlessui itself

CodeSandbox is to complicated for this simple test

created: https://github.com/vanling/nuxt3-issue-reproduction/ It doesn’t get more basic then this npm i && npm run build && npm run start open localhost:3000 and check terminal for errors in server

vanling on Dec 13, 2021