rabbit_rabbit
rabbit_rabbit12mo ago

@headlessui/react + Fresh

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"
"@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: https://github.com/will-weiss/fresh-headlessui-repro/blob/main/islands/Combo.tsx And the full repository: https://github.com/will-weiss/fresh-headlessui-repro Thanks in advance!
GitHub
fresh-headlessui-repro/islands/Combo.tsx at main · will-weiss/fresh...
Minimal Repro trying to get a combobox to be used. Contribute to will-weiss/fresh-headlessui-repro development by creating an account on GitHub.
GitHub
GitHub - will-weiss/fresh-headlessui-repro: Minimal Repro trying to...
Minimal Repro trying to get a combobox to be used. Contribute to will-weiss/fresh-headlessui-repro development by creating an account on GitHub.
3 Replies
Deno AI Helper
Deno AI Helper12mo ago
I wasn't able to find the answer to your question in the official Deno documentation. However, based on the information you've provided, I can offer some general advice that might help you troubleshoot the issue. Looking at the deno.json imports you've shared, the syntax seems correct for aliasing modules with esm.sh. However, please note that this advice is not based on the Deno documentation, and you should double-check the accuracy of the advice given. One thing to consider is that @headlessui/react is designed to work with React, and while preact/compat aims to provide compatibility, there might be edge cases or specific functionality that does not translate perfectly. This could potentially be the cause of the issue with useState. Since you are seeing a minified property error, it might be related to the build or bundling process that esm.sh uses. Minification errors can sometimes be difficult to debug because they obscure the original code. Given that you have provided links to your implementation and the full repository, I would suggest checking the following: 1. Ensure that all dependencies are correctly aliased and that there are no version conflicts. 2. Look for any known issues with @headlessui/react when used with preact/compat. 3. Check if there are any open issues or discussions in the @headlessui/react or preact repositories that might be related to your problem. Remember to also check the console for any warnings or errors that might provide more insight into what's going wrong. If the issue persists, you might want to consider reaching out to the community for help or looking for alternative solutions that are more compatible with Preact.
marvinh.
marvinh.12mo ago
I'm currently on vacation and will be back in the new year. Can you file an issue for that? That ensured that we don't lose sight of this as it's hard to keep track of discord messages
rabbit_rabbit
rabbit_rabbitOP12mo ago
Thanks @marvinh. Just filed an issue — enjoy your vacation! https://github.com/denoland/fresh/issues/2206
GitHub
state handling not working using @headlessui/react via preact/compa...
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...