Unable to refresh(f5) on modal page, window not found.

[vanling]

Environment

Nuxt CLI v3.0.0-27258467.4e424d0

---

• Operating System: Darwin
• Node Version: v16.13.0
• Nuxt Version: 3.0.0-27258467.4e424d0
• Package Manager: yarn@1.22.17
• Bundler: Vite
• User Config: buildModules, build
• Runtime Modules: -

• Build Modules: @pinia/nuxt@0.1.0

Describe the bug

SSR is not working because of headless-ui.

If you can go to the modal page from index.vue it works if you go to http://localhost:3000/modal directly or refresh there it breaks.

Not your fault, just headless-ui being naughty with using the window object

Additional context

No response

Logs

[Vue warn]: Unhandled error during execution of setup function 
  at <Dialog as="div" class="fixed z-10 inset-0 overflow-y-auto" onClose=fn<onClose>  ... >
window is not defined
  at useWindowEvent (file://./.nuxt/dist/server/server.mjs:2819:3)  
  at useFocusTrap (file://./.nuxt/dist/server/server.mjs:2897:3)  
  at setup (file://./.nuxt/dist/server/server.mjs:3467:5)  
  at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6599:22)  
  at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6225:29)  
  at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6181:11)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:198:17)  
  at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:304:22)  
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:269:13)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:214:16)

[productdevbook]

• [ ] https://github.com/tailwindlabs/headlessui/issues/903

[eMeRiKa13]

I tried to add headless ui and use their components Menu, MenuButton and MenuItems but I have a error "500 window is not defined".

Is this library not working at all with nuxt 3 (yet)?

[productdevbook]

I tried to add headless ui and use their components Menu, MenuButton and MenuItems but I have a error "500 window is not defined".

Is this library not working at all with nuxt 3 (yet)?

@eMeRiKa13 I added the link above, we are waiting for the update. headlessui

[vanling]

@eMeRiKa13 it only works in SPA mode without any Server side rendering :( headless-ui uses window and document object. 🤞 hope they fix it, would be a holy grail for me.

[eMeRiKa13]

Thanks for your answer @productdevbook and @vanling!

I hope too

[productdevbook]

fixed, change modal ref true -> false :) and allupdate check repo