Inherits Issue 982 from tailwindlabs/headlessui

[PeritonM]

Using the Menu component (for example) throws a bunch of errors:

Console errors:

[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. [Vue warn]: Unhandled error during execution of setup function at

On-Screen Errors:

Cannot read properties of undefined (reading 'buttonRef')

Solution

https://github.com/tailwindlabs/headlessui/issues/982

Adding

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

to nuxt.config.js resolves this.

It's just a minor inconvenience but still annoying. Don't know if this is something that can be fixed here or maybe there's another solution.

Thanks in advance!

[blackburn32]

Thank you for linking this! Helped me fix the issues I was having with the HeadlessDisclosure not loading correctly.

[P4sca1]

Interesting, I thought this issue has been resolved in recent Nuxt versions and you no longer have to transpile the library.

Which version of Nuxt are you using? Also, could it be that you have installed @headlessui/vue by yourself and it used a different version? If possible, please paste the output of yarn why @headlessui/vue.

[P4sca1]

For reference: https://github.com/nuxt/nuxt.js/issues/12996 https://github.com/nuxt/nuxt.js/issues/13632

[PeritonM]

Hey! Thanks for your reply, I thought this was fixed, too.

I set up a fresh project with Nuxt 3.0.0 stable and only installed nuxt-headlessui as described in the documentation here: https://nuxt.com/modules/headlessui

package.json looks like this:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "3.0.0",
    "nuxt-headlessui": "^1.0.1"
  }
}

Bug still occurs, but I hope this helps! Let me know, if you need more info

Edit: (I use npm, so I can't give any info on yarn why, sry)

[P4sca1]

:tada: This issue has been resolved in version 1.0.2 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[P4sca1]

I published a new version, which automatically adds @headlessui/vue to build.transpile for now.

[PeritonM]

Thank you so much, this works for now! I really hope there will be a better fix for this in the future, but that's not your job haha

Thanks for maintaining this, I'll try to update this when I hear about an 'official' fix :)

[P4sca1]

@Periton-Media I published a new version, which reverts the change of adding @headlessui/vue to build.transpile. I just tested it and it works without problems. Could you also try if the latest version works for you, please? You might also need to clear your package-lock.json file.

[ymansurozer]

That last change appears to brought back this issue for me. I have to add @headlessui/vue to build.transpile again, otherwise I get the errors.

[P4sca1]

That last change appears to brought back this issue for me. I have to add @headlessui/vue to build.transpile again, otherwise I get the errors.

I have removed the workaround of adding @headlessui/vue to build.transpile from this module again, because it should not be needed. Have you tried to regenerate your lock file and are you sure you are using latest dependencies of headlessui and Nuxt? Also, make sure you don't have multiple versions of vue installed.

[P4sca1]

If you still have the issue, please create a reproduction so that I can take a look. I tested it in a fresh Nuxt 3 project, as well as in a personal more complex repo, and it worked with both dev and build.

[ymansurozer]

Thanks. I did update the lock file and am using the latest versions, but I still need the transpile option. This is the repo where I am having this problem: NuxTailwind. This is a template so it should isolate the issue but I will also try to create smaller repo for this.

[P4sca1]

Thank you for the repo. I will have a look once I get some spare time. In the meantime, manually add @headlessui/vue to build.transpile as a workaround if you experience the issue.

[P4sca1]

Hey @ymansurozer, where you able to isolate the issue into a smaller repo?

[ymansurozer]

Hey @P4sca1, I just tried with a smaller repo and it works without adding to build.transpile. I think is related to my other packages used in NuxTailwind. I'll delve into it and let you know if something related to the module comes up.