HeadlessUI is not working with Nuxt 3 #982
Comments
|
+1 on this one. |
|
+1 |
1 similar comment
|
+1 |
|
It works for me with the following package.json/versions. Can you share your .vue script where you import and call what you need. |
|
Are you trying in development mode or production mode with built files (.output) ? |
|
I have it working in both, dev and production build. I didn't try to use them in pages directly, I create components with headlessui parts in it. (should not make a difference) let me test this right now |
Thank you for your response. I also tried with this nuxt 3 starter but I 've got same error. https://github.com/productdevbook/nuxt3-app?ref=bestofvue.com |
|
Is your default "open" state true? for example |
|
I got the same errors now with the Menu components. On page and also when its wrapped in a component. We need to make a small reproduction i think |
Reproductionhttps://codesandbox.io/s/angry-orla-qf02s?file=/pages/index.vue Opening a new terminal and running EDIT: CodeSandbox is to complicated for this simple test created: https://github.com/vanling/nuxt3-issue-reproduction/ |
|
+1 |
|
Adding to this issue as a reminder because there is more than one issue with HeadlessUI x Nuxt 3. I am getting the following error in Safari using the Disclosure component in a production environment:
The component also doesn't work in other browsers, but it shows no error messages in the console. Hoping to use HeadlessUI in Nuxt 3 sometime in the future 🤞 |
|
Hey! Thank you for your bug report! This should be fixed, and will be available in the next release. You can already try it using:
|
This throws an error with the webpack bundler. Webpack support is important as nuxt3's vite implementation doesnt resolves dynamic assets via props properly. To reproduce, in vaning's repro https://github.com/vanling/nuxt3-issue-reproduction/, in export default defineNuxtConfig({
...,
vite: false
});Here is the error. |
|
Hello! It doesn't seem to work with Vite, either, after compilation: |
Strange, the repro when using the insider build was working with the vite bundler, but not webpack |
|
@Blakeinstein I actually tried it anyways, and for some reason my site did load without problems even though this error was spat out. SSR seemed to be correct, too, with the client not complaining during hydration. I'm not really sure what's happening. 😅 |
I am myself now getting the same error? I changed the import statement to be import * as headlessui from '@headlessui/vue'
const { Popover, PopoverButton, PopoverPanel } = headlessuiand now am getting the type: module error as i got in webpack. @RobinMalfait I think its a bit too early to close this issue. |
|
Do you transpile @headlessui/vue package in nuxt.config ? |
Can confirm this works. But not sure if this is a fix or a workaround. |
it's definitely a workaround, HeadlessUi needs to work so that it can be imported natively into Nuxt 3 without build bugs. but for now it is enough for us. |
|
Did a few improvements and it fixes the important parts, it's a proper You can already try it using 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? |
Can confirm that it is fixed, both on vite and on webpack. Apart from said |
|
Thanks for testing, @Blakeinstein! Going to close this issue, if somebody still has an issue, please open a new issue with a reproduction. Also make sure that for now you have to use the |
this problem is nuxt3 bug? how can i use headlessUI in nuxt3? install headlessUI@insiders? |
Thats it |
|
Solution (workaround) tldr;
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
build: {
transpile: ['@headlessui/vue']
}
})
|
I am using it in prod without adding this package to transpile |
|
Hey there 👋 I'm currently facing very similar issue using headlessui with Nuxt3. Until version Then I tried to update latest Nuxt version (current version is
When looking at logs, it seems that errors and warns are coming from headlessui I also tried to use |
|
These errors are probably coming from Nuxt. See this github issue : nuxt/nuxt#13500 |
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 |
What package within Headless UI are you using?
@headlessui/vue
What version of that package are you using?
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.
The text was updated successfully, but these errors were encountered: