headlessui: HeadlessUI is not working with Nuxt 3

What package within Headless UI are you using?

What version of that package are you using?

"devDependencies": {
    "autoprefixer": "^10.4.0",
    "nuxt3": "latest",
    "postcss": "^8.4.4",
    "tailwindcss": "^2.2.19"
  },
  "dependencies": {
    "@headlessui/vue": "^1.4.2",
    "@heroicons/vue": "^1.0.5",
    "@tailwindcss/forms": "^0.3.4"
  }

Describe your issue

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.

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)

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 10
Comments: 31

Most upvoted comments

Solution (workaround) tldr;

Use the insiders version of @headless ui: npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders
Add the library for transpiling during build in nuxt.config.ts|js:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  build: {
    transpile: ['@headlessui/vue']
  }
})

build, then nuxi preview, and voilà. Works.

+14

oliviermills on Jan 19, 2023

+1 on this one.

bencehusi on Dec 10, 2021

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

This should be fixed, and will be available in the next release.

You can already try it using:

npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.
npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

RobinMalfait on Jan 19, 2023

akdenizbengisu on Dec 10, 2021

Did a few improvements and it fixes the important parts, it’s a proper type: module and all cjs files are using .cjs instead of `.js.

You can already try it using npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

Creating a new Nuxt 3 app and loading Headless UI gives me the expected output without console warnings.

@Blakeinstein When I pull down the repro you provided, and bump to the latest insiders version I linked above then I do get the correct output:

The terminal correctly outputs the following information:

However, it looks like there is a server side rendering Nuxt bug once you load the page:

After some digging, @thecrypticace found that Nuxt loads 2 versions of Vue which results in these errors because they check if the same instance of Vue is used. But you should get this warning for any external library that depends on Vue, I think.

Can somebody verify the latest insiders build?

RobinMalfait on Jan 31, 2022

I got the same errors now with the Menu components. On page and also when its wrapped in a component. Only in the server on SSR.

[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 'buttonRef')

We need to make a small reproduction i think

vanling on Dec 13, 2021

Do you transpile @headlessui/vue package in nuxt.config ?

https://v3.nuxtjs.org/concepts/esm/#transpiling-libraries

misaon on Jan 29, 2022

Reproduction

https://codesandbox.io/s/angry-orla-qf02s?file=/pages/index.vue

Opening a new terminal and running npm run build && PORT=4000 node .output/server/index.mjs\

EDIT:

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

cgrlcr on Dec 10, 2021

When looking at logs, it seems that errors and warns are coming from headlessui

The thing is, its most likely another error in your code. Those errors can be ignored, but nuxt doesnt report the errors properly making some headlessui events (like expanding popovers) break. I faced this in a particular instance but I cannot recall what error I had, but it was not in headless ui

Blakeinstein on Mar 17, 2022

this problem is nuxt3 bug? how can i use headlessUI in nuxt3? install headlessUI@insiders?

npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

Thats it

Blakeinstein on Mar 16, 2022