CODEWITHSUNDEEP
denopreactheadless-ui
Vicens Fayos
Vicens Fayos

Reputation: 760

Error when adding Headless-ui in a Deno+Fresh Project

I have a Deno+Fresh project and when adding headlessui to my Fresh projec I get the following error:

TypeError: Cannot read properties of undefined (reading '__H')

I read the following discussion that apparently addresses my issue... https://github.com/denoland/fresh/discussions/606

But I can not make it work.

To debug the issue I created a demo project (https://github.com/datracka/test-headlessui2)

It is just a new fresh project created with deno run -A -r https://fresh.deno.dev my-project where I just added a new island MySwitch, importing directly the headlessui module as described in the github discussion thread.


import { Switch } from "https://esm.sh/@headlessui/[email protected]?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&[email protected]";
import { useState } from "preact/hooks";
import { tw } from "twind";

export default function () {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(!checked);

  return (
    <Switch
      checked={checked}
      onChange={toggleChecked}
      class={tw`${
        checked ? "bg-blue-600" : "bg-gray-200"
      } relative inline-flex h-6 w-11 items-center rounded-full`}
    >
      <span class={tw`sr-only`}>Enable notifications</span>
      <span
        class={tw`${
          checked ? "translate-x-6" : "translate-x-1"
        } inline-block h-4 w-4 transform rounded-full bg-white`}
      />
    </Switch>
  );
}

It fires the error above when running the project with deno task start.

What am I missing?

Thanks for your help and time!

Upvotes: 0

Views: 995

Answers (2)

Per
Per

Reputation: 413

The following imports make the error go away:

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

    "$fresh/": "https://deno.land/x/[email protected]/",
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]/",
    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
    "tailwindcss": "npm:[email protected]",
    "$std/": "https://deno.land/[email protected]/",
    "swr": "https://esm.sh/v98/[email protected]?alias=react:preact/compat&external=preact/compat",
    
    "@heroicons/react/24/outline": "https://esm.sh/@heroicons/[email protected]/24/outline?alias=react:preact/compat,react-dom:preact/compat&external=react,react-dom",
    "@headlessui/react": "https://esm.sh/@headlessui/[email protected]?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",

    "react": "https://esm.sh/[email protected]/compat",
    "react-dom": "https://esm.sh/[email protected]/compat"
  },

as seen here: https://github.com/perguth/denoland-merch

But then again I could not get it to work functionally.

Upvotes: 0

Vicens Fayos
Vicens Fayos

Reputation: 760

Found the issue

The import was fine:

import { Switch } from "https://esm.sh/@headlessui/[email protected]?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&[email protected]";

Only you have to have in consideration the current version of preact in your Fresh project. Otherwise they collide and therefore raise the error above.

In my case the current version was 10.11.0 and not 10.10.0

I hope it helps somebody.

Upvotes: 2

Related Questions