state handling not working using @headlessui/react via preact/compat #2206

will-weiss · 2023-12-30T12:45:46Z

I'm trying to use preact/compat to leverage @headlessui/react, but running into

In the "imports" of my deno.json I have

    "@headlessui/react": "https://esm.sh/@headlessui/react@1.7.17?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&deps=preact@10.19.2",
    "react": "https://esm.sh/preact@10.19.2/compat"

The input renders, and fires the callback, but something about the useState seems off as I see some minified property is not a function, as in the attached image.

Here is my implementation of the component within this repository featuring a minimal reproduction of the issue.

Thanks in advance!

The text was updated successfully, but these errors were encountered:

will-weiss · 2024-01-09T21:10:12Z

Turns out this does work with a slight change to the import statement

https://github.com/hapaxlife/test-fresh-headless-ui/tree/main

marvinhagemeister · 2024-01-09T23:29:36Z

The fix is a bit strange. I got it to work on my end by doing this:

  {
    "imports": {
-     "@headlessui/react": "https://esm.sh/@headlessui/react@1.7.17?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&deps=preact@10.19.2",
+     "@headlessui/react": "https://esm.sh/@headlessui/react@1.7.17?external=react,react-dom&alias=@types/react:preact/compat",
+     "react-dom": "https://esm.sh/preact@10.19.2/compat"
      "react": "https://esm.sh/preact@10.19.2/compat",
    }
  }

maxbrieiev · 2024-05-11T20:13:50Z

The fix is a bit strange. I got it to work on my end by doing this:

  {
    "imports": {
-     "@headlessui/react": "https://esm.sh/@headlessui/react@1.7.17?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&deps=preact@10.19.2",
+     "@headlessui/react": "https://esm.sh/@headlessui/react@1.7.17?external=react,react-dom&alias=@types/react:preact/compat",
+     "react-dom": "https://esm.sh/preact@10.19.2/compat"
      "react": "https://esm.sh/preact@10.19.2/compat",
    }
  }

if I change the version of @headlessui/react to the latest one, 2.0.3, I encounter the following error:

An error occurred during route handling or page rendering.
ReferenceError: document is not defined
    at _ (https://esm.sh/v135/@react-aria/utils@3.24.0/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdAplL3JlYWN0LHJlYWN0LWRvbQ/denonext/utils.mjs:2:1401)
    at we (https://esm.sh/v135/@react-aria/utils@3.24.0/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdAplL3JlYWN0LHJlYWN0LWRvbQ/denonext/utils.mjs:2:1449)
    at ee (https://esm.sh/v135/@react-aria/interactions@3.21.2/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdAplL3JlYWN0LHJlYWN0LWRvbQ/denonext/interactions.mjs:2:15601)
    at Ce (https://esm.sh/v135/@react-aria/interactions@3.21.2/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdAplL3JlYWN0LHJlYWN0LWRvbQ/denonext/interactions.mjs:2:17960)
    at V (https://esm.sh/v135/@react-aria/focus@3.17.0/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdAplL3JlYWN0LHJlYWN0LWRvbQ/denonext/focus.mjs:2:12169)
    at vl (https://esm.sh/v135/@headlessui/react@2.0.3/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdAplL3JlYWN0LHJlYWN0LWRvbQ/denonext/react.mjs:6:45501)
    at Object.t (https://esm.sh/stable/preact@10.21.0/denonext/compat.js:2:1545)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3237)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)

Seeing preact-render-to-string in the traceback, I'd assume the component is rendered in a server context, even though it is defined as an island?

As a side note, how do I even debug such errors? I am lost as to where to put the breakpoint or add logging provided this kind of traceback.

fkoemep · 2024-06-08T15:16:17Z

The fix is a bit strange. I got it to work on my end by doing this:

  {
    "imports": {
-     "@headlessui/react": "https://esm.sh/@headlessui/react@1.7.17?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&deps=preact@10.19.2",
+     "@headlessui/react": "https://esm.sh/@headlessui/react@1.7.17?external=react,react-dom&alias=@types/react:preact/compat",
+     "react-dom": "https://esm.sh/preact@10.19.2/compat"
      "react": "https://esm.sh/preact@10.19.2/compat",
    }
  }

if I change the version of @headlessui/react to the latest one, 2.0.3, I encounter the following error:

An error occurred during route handling or page rendering.
ReferenceError: document is not defined
    at _ (https://esm.sh/v135/@react-aria/utils@3.24.0/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdAplL3JlYWN0LHJlYWN0LWRvbQ/denonext/utils.mjs:2:1401)
    at we (https://esm.sh/v135/@react-aria/utils@3.24.0/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdAplL3JlYWN0LHJlYWN0LWRvbQ/denonext/utils.mjs:2:1449)
    at ee (https://esm.sh/v135/@react-aria/interactions@3.21.2/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdAplL3JlYWN0LHJlYWN0LWRvbQ/denonext/interactions.mjs:2:15601)
    at Ce (https://esm.sh/v135/@react-aria/interactions@3.21.2/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdAplL3JlYWN0LHJlYWN0LWRvbQ/denonext/interactions.mjs:2:17960)
    at V (https://esm.sh/v135/@react-aria/focus@3.17.0/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdAplL3JlYWN0LHJlYWN0LWRvbQ/denonext/focus.mjs:2:12169)
    at vl (https://esm.sh/v135/@headlessui/react@2.0.3/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdAplL3JlYWN0LHJlYWN0LWRvbQ/denonext/react.mjs:6:45501)
    at Object.t (https://esm.sh/stable/preact@10.21.0/denonext/compat.js:2:1545)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3237)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)

Seeing preact-render-to-string in the traceback, I'd assume the component is rendered in a server context, even though it is defined as an island?

As a side note, how do I even debug such errors? I am lost as to where to put the breakpoint or add logging provided this kind of traceback.

Any progress on this? I'm having the same issues

lishaduck · 2024-06-09T00:51:39Z

See

Currently nothing new. The stacktrace suggests that react-aria is incorrectly determining if it's SRR-ing or not based on window variable, not the document variable.

lishaduck · 2024-06-09T01:12:17Z

preact-render-to-string in the traceback, I'd assume the component is rendered in a server context, even though it is defined as an island?

I went to close this tab, but figured I'd address this: islands are SSRed, then hydrated. Islands get rendered on both the server and the client. The bug is that react-aria thinks that it's being CSRed while on the server b/c Deno supplies a window global, so it gets confused. Deno 2 will fix this, but for now, the above comments provide workarounds.

perguth · 2024-10-17T09:00:40Z

Deno 2 will fix this

What would I use?

That does not work with Deno 2:

"@headlessui/react": "https://esm.sh/@headlessui/react@2.1.10?external=react,react-dom&alias=@types/react:preact/compat",
"react-dom": "https://esm.sh/preact@10.19.2/compat",
"react": "https://esm.sh/preact@10.19.2/compat",

lishaduck · 2024-10-17T16:55:06Z

What error are you getting?

perguth · 2024-10-18T08:32:51Z

Here is the code. I did:

Start with denoland/merch
Upgrade to Tailwind (All works fine till now)
Add HeadlessUI and its deps to imports (Now 500)

https://github.com/perguth/denoland-merch

(https://discord.com/channels/684898665143206084/991511118524715139/1296751674442125323)

Updates:

Just using one version of preact in the deps fixes the error.
But then actually using some HeadlessUI (denoland/merch@2e0d105) breaks it again:

Invalid type passed to createElement(): [object Object]
Error: Invalid type passed to createElement(): [object Object]
    at a.__b (https://esm.sh/stable/preact@10.22.0/denonext/debug.js:23:9)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2611)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)

🎉 Got it to work with those imports:

  "imports": {
    "@/": "./",

    "$fresh/": "https://deno.land/x/fresh@1.7.2/",
    "preact": "https://esm.sh/preact@10.24.3",
    "preact/": "https://esm.sh/preact@10.24.3/",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
    "tailwindcss": "npm:tailwindcss@3.4.1",
    "$std/": "https://deno.land/std@0.216.0/",
    "swr": "https://esm.sh/v98/swr@1.3.0?alias=react:preact/compat&external=preact/compat",
    
    "@heroicons/react/24/outline": "https://esm.sh/@heroicons/react@2.1.5/24/outline?alias=react:preact/compat,react-dom:preact/compat&external=react,react-dom",
    "@headlessui/react": "https://esm.sh/@headlessui/react@2.1.10?alias=react:preact/compat,react-dom:preact/compat&external=react,react-dom",
    "@floating-ui/react": "https://esm.sh/@floating-ui/react@latest?alias=react:preact/compat,react-dom:preact/compat&external=react,react-dom",
    "@tanstack/react-virtual": "https://esm.sh/@tanstack/react-virtual@latest?alias=react:preact/compat,react-dom:preact/compat&external=react,react-dom",
    "@react-aria/interactions": "https://esm.sh/@react-aria/interactions@latest?alias=react:preact/compat,react-dom:preact/compat&external=react,react-dom",
    "@react-aria/focus": "https://esm.sh/@react-aria/focus@latest?alias=react:preact/compat,react-dom:preact/compat&external=react,react-dom",

    "preact/hooks": "https://esm.sh/preact@10.24.3/hooks",
    "react": "https://esm.sh/preact@10.24.3/compat",
    "react-dom": "https://esm.sh/preact@10.24.3/compat"
  },

fkoemep · 2024-12-05T23:59:18Z

Here is the code. I did:

Start with denoland/merch
Upgrade to Tailwind (All works fine till now)
Add HeadlessUI and its deps to imports (Now 500)

https://github.com/perguth/denoland-merch

(https://discord.com/channels/684898665143206084/991511118524715139/1296751674442125323)

Updates:

Just using one version of preact in the deps fixes the error.
But then actually using some HeadlessUI (denoland/merch@2e0d105) breaks it again:

Invalid type passed to createElement(): [object Object]
Error: Invalid type passed to createElement(): [object Object]
    at a.__b (https://esm.sh/stable/preact@10.22.0/denonext/debug.js:23:9)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2611)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)

🎉 Got it to work with those imports:

  "imports": {
    "@/": "./",

    "$fresh/": "https://deno.land/x/fresh@1.7.2/",
    "preact": "https://esm.sh/preact@10.24.3",
    "preact/": "https://esm.sh/preact@10.24.3/",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
    "tailwindcss": "npm:tailwindcss@3.4.1",
    "$std/": "https://deno.land/std@0.216.0/",
    "swr": "https://esm.sh/v98/swr@1.3.0?alias=react:preact/compat&external=preact/compat",
    
    "@heroicons/react/24/outline": "https://esm.sh/@heroicons/react@2.1.5/24/outline?alias=react:preact/compat,react-dom:preact/compat&external=react,react-dom",
    "@headlessui/react": "https://esm.sh/@headlessui/react@2.1.10?alias=react:preact/compat,react-dom:preact/compat&external=react,react-dom",
    "@floating-ui/react": "https://esm.sh/@floating-ui/react@latest?alias=react:preact/compat,react-dom:preact/compat&external=react,react-dom",
    "@tanstack/react-virtual": "https://esm.sh/@tanstack/react-virtual@latest?alias=react:preact/compat,react-dom:preact/compat&external=react,react-dom",
    "@react-aria/interactions": "https://esm.sh/@react-aria/interactions@latest?alias=react:preact/compat,react-dom:preact/compat&external=react,react-dom",
    "@react-aria/focus": "https://esm.sh/@react-aria/focus@latest?alias=react:preact/compat,react-dom:preact/compat&external=react,react-dom",

    "preact/hooks": "https://esm.sh/preact@10.24.3/hooks",
    "react": "https://esm.sh/preact@10.24.3/compat",
    "react-dom": "https://esm.sh/preact@10.24.3/compat"
  },

Did this work for you on Deno Deploy? In my project everything works perfectly fine when running from dev.ts, and also when I build and preview, which is supposed to mimic the prod environment but once I deploy to production I get the same error saying "ReferenceError: document is not defined" even though it builds without issues on Github Actions

lishaduck · 2024-12-06T01:28:45Z

Did this work for you on Deno Deploy? In my project everything works perfectly fine when running from dev.ts, and also when I build and preview, which is supposed to mimic the prod environment but once I deploy to production I get the same error saying "ReferenceError: document is not defined" even though it builds without issues on Github Actions

That's a different issue. This is about incorrect versions, while your previous comment, #2426 is about that issue. See my comment over there.
If you want to fix it, feel free to go tackle adobe/react-spectrum#6534 (at least thumbs it up).

fkoemep · 2024-12-06T01:57:35Z

Did this work for you on Deno Deploy? In my project everything works perfectly fine when running from dev.ts, and also when I build and preview, which is supposed to mimic the prod environment but once I deploy to production I get the same error saying "ReferenceError: document is not defined" even though it builds without issues on Github Actions

That's a different issue. This is about incorrect versions, while your previous comment, #2426 is about that issue. See my comment over there. If you want to fix it, feel free to go tackle adobe/react-spectrum#6534 (at least thumbs it up).

Thank you for this, it drove me nuts today. I was happy that I finally was able to run headlessui v2 with deno but it seems like some dependencies need to be patched to make it work with deno deploy

lishaduck · 2024-12-06T02:00:41Z

Thank you for this, it drove me nuts today. I was happy that I finally was able to run headlessui v2 with deno but it seems like some dependencies need to be patched to make it work with deno deploy

Yeah, it's pretty annoying. I'm still unsure why Deno Deploy doesn't support it. I think it's technically a separate runtime that reuses Deno's crates, and so it's probably not included to avoid breaking existing apps, but I'd sure wish they'd offer an option. Maybe I'll file an issue.
EDIT: denoland/deploy_feedback#705 (comment)

fkoemep · 2024-12-06T02:10:52Z

Thank you for this, it drove me nuts today. I was happy that I finally was able to run headlessui v2 with deno but it seems like some dependencies need to be patched to make it work with deno deploy

Yeah, it's pretty annoying. I'm still unsure why Deno Deploy doesn't support it. I think it's technically a separate runtime that reuses Deno's crates, and so it's probably not included to avoid breaking existing apps, but I'd sure wish they'd offer an option. Maybe I'll file an issue.

Was thinking something similar today. Deno build + preview has to mimic a prod environment (deno deploy in this case) afaik.

Made me wonder so I found this denoland/deploy_feedback#764, that's the right answer here, they're not even using Deno v2 so I'm guessing that we'll have to wait a little bit more

lishaduck · 2024-12-06T02:21:50Z

Made me wonder so I found this denoland/deploy_feedback#764, that's the right answer here, they're not even using Deno v2 so I'm guessing that we'll have to wait a little bit more

Yeah, it's partially chagrining to be because they'd said it was ready, so I almost merged a PR to remove the compat layer. Always test with a production build running on real servers!

Also related: denoland/deploy_feedback#666.

fkoemep · 2024-12-06T02:27:35Z

Made me wonder so I found this denoland/deploy_feedback#764, that's the right answer here, they're not even using Deno v2 so I'm guessing that we'll have to wait a little bit more

Yeah, it's partially chagrining to be because they'd said it was ready, so I almost merged a PR to remove the compat layer. Always test with a production build running on real servers!

Also related: denoland/deploy_feedback#666.

True, thank god it was a personal project and not something critical, next time I'll trust but verify

marvinhagemeister closed this as completed Jan 9, 2024

marvinhagemeister added the react-compat Issues in relation to React compatibility label Jan 9, 2024

lishaduck mentioned this issue May 13, 2024

HeadlessUI v2 PHS-TSA/webmaster-23-24#50

Merged

lishaduck mentioned this issue Jun 12, 2024

Window is defined in Deno 1.x adobe/react-spectrum#6534

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

state handling not working using @headlessui/react via preact/compat #2206

state handling not working using @headlessui/react via preact/compat #2206

will-weiss commented Dec 30, 2023

will-weiss commented Jan 9, 2024

marvinhagemeister commented Jan 9, 2024

maxbrieiev commented May 11, 2024

fkoemep commented Jun 8, 2024

lishaduck commented Jun 9, 2024

lishaduck commented Jun 9, 2024

perguth commented Oct 17, 2024

lishaduck commented Oct 17, 2024

perguth commented Oct 18, 2024 •

edited

Loading

fkoemep commented Dec 5, 2024

lishaduck commented Dec 6, 2024

fkoemep commented Dec 6, 2024 •

edited

Loading

lishaduck commented Dec 6, 2024 •

edited

Loading

fkoemep commented Dec 6, 2024

lishaduck commented Dec 6, 2024

fkoemep commented Dec 6, 2024

state handling not working using @headlessui/react via preact/compat #2206

state handling not working using @headlessui/react via preact/compat #2206

Comments

will-weiss commented Dec 30, 2023

will-weiss commented Jan 9, 2024

marvinhagemeister commented Jan 9, 2024

maxbrieiev commented May 11, 2024

fkoemep commented Jun 8, 2024

lishaduck commented Jun 9, 2024

lishaduck commented Jun 9, 2024

perguth commented Oct 17, 2024

lishaduck commented Oct 17, 2024

perguth commented Oct 18, 2024 • edited Loading

fkoemep commented Dec 5, 2024

lishaduck commented Dec 6, 2024

fkoemep commented Dec 6, 2024 • edited Loading

lishaduck commented Dec 6, 2024 • edited Loading

fkoemep commented Dec 6, 2024

lishaduck commented Dec 6, 2024

fkoemep commented Dec 6, 2024

perguth commented Oct 18, 2024 •

edited

Loading

fkoemep commented Dec 6, 2024 •

edited

Loading

lishaduck commented Dec 6, 2024 •

edited

Loading