HeadlessUI is not working with Nuxt 3 #12996
Comments
|
I use headless ui every day, and it's fine on both dev and release. do you have any code to reproduce the problem? |
I have used this starter but I also tried installing from scratch. You can try it by using this. https://github.com/productdevbook/nuxt3-app?ref=bestofvue.com |
Reproduction by @vanlinghttps://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 |
|
Everything is fine on dev. And it looks ok on production over here, but there is an SSR issue in console. I personally think this is an issue in headlessui, but I am not 100% sure. |
this repo works fine on my mac, no error (global) ➜ projects git clone git@github.com:productdevbook/nuxt3-app.git
Cloning into 'nuxt3-app'...
remote: Enumerating objects: 270, done.
remote: Counting objects: 100% (270/270), done.
remote: Compressing objects: 100% (191/191), done.
remote: Total 270 (delta 171), reused 144 (delta 65), pack-reused 0
Receiving objects: 100% (270/270), 231.83 KiB | 472.00 KiB/s, done.
Resolving deltas: 100% (171/171), done.
(global) ➜ projects cd nuxt3-app
(global) ➜ nuxt3-app git:(master) yarn
yarn install v1.22.17
[1/5] 🔍 Validating package.json...
[2/5] 🔍 Resolving packages...
[3/5] 🚚 Fetching packages...
info There appears to be trouble with your network connection. Retrying...
[4/5] 🔗 Linking dependencies...
warning " > @headlessui/vue@1.4.2" has unmet peer dependency "vue@^3.0.0".
warning " > @heroicons/vue@1.0.5" has unmet peer dependency "vue@>= 3".
warning "@pinia/nuxt > vue-demi@0.12.1" has unmet peer dependency "vue@^3.0.0-0 || ^2.6.0".
warning " > pinia@2.0.3" has unmet peer dependency "vue@^2.6.14 || ^3.2.0".
warning " > sass-loader@12.3.0" has unmet peer dependency "webpack@^5.0.0".
[5/5] 🔨 Building fresh packages...
✨ Done in 43.36s.
(global) ➜ nuxt3-app git:(master) yarn build
yarn run v1.22.17
$ nuxi build
Nuxt CLI v3.0.0-27277330.202617b 21:58:45
ℹ Vite warmed up in 929ms 21:58:48
ℹ Client built in 2609ms 21:58:49
ℹ Building server... 21:58:49
✔ Server built in 1010ms 21:58:50
ℹ Nitro preset is server 21:58:50
ℹ Cleaning up .output 21:58:50
start Generating public... 21:58:50
✔ Generated public .output/public 21:58:50
start Building server... 21:58:50
start Writing server bundle... 21:58:54
✔ Server built 21:58:54
├─ .output/server/index.mjs (69.5 kB) (23.7 kB gzip)
├─ .output/server/chunks/nitro/static.mjs (3.8 kB) (1.4 kB gzip)
├─ .output/server/chunks/index.mjs (390 kB) (89.9 kB gzip)
├─ .output/server/chunks/app/vue3.mjs (284 B) (200 B gzip)
├─ .output/server/chunks/app/server.mjs (202 kB) (42 kB gzip)
├─ .output/server/chunks/app/render.mjs (22.5 kB) (6.25 kB gzip)
└─ .output/server/chunks/app/client.manifest.mjs (1.39 kB) (362 B gzip)
Σ Total size: 3.29 MB (764 kB gzip)
✔ Ready to run node .output/server/index.mjs 21:58:54
✨ Done in 10.26s.
(global) ➜ nuxt3-app git:(master) yarn start
yarn run v1.22.17
$ node .output/server/index.mjs
Listening on http://localhost:3000 |
Did you check the page on the browser? Because it gives error when we try to browse the page. |
|
@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/ |
OK, i've got this error...
I have see that error, but not figure out yet |
|
in nuxt.config adding
solve problem for now |
|
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.
This separate version of Vue has it's own All in all it seems like this is a Nuxt 3 issue — at least as far as we can tell. |
|
@thecrypticace is right. The problem is exacerbated if you try to use a non-minified version of @headless/ui - then you'll see errors in The prod version of import{Fragment as Gn,computed as A,defineComponent as ve,h as Ct,inject as _n,nextTick as U,onMounted as Et,onUnmounted as qn,provide as zn,ref as B,toRaw as Q,watch as ze,watchEffect as Qe}from"vue" |
|
I've started a discussion on another headlessui related issue which hasn't seen much love. I'll reference it here seeing as it's headlessui related and hence an important part of the tailwind ecosystem: |
|
@thecrypticace is exactly right. At the moment any dependency you have that is importing from I've opened a new issue to follow the potential solutions, including moving vue to an external: #13632. Thoughts are certainly welcome. |
|
We now add vue as an external by default. We can track any remaining issues in #13632. |
This worked for me. build: {
transpile: ["@heroicons/vue", "@headlessui/vue"],
} |
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.
Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered: