0

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/react@1.6.6?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&deps=preact@10.10.0";
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!

Vicens Fayos
  • 740
  • 1
  • 5
  • 18

1 Answers1

1

Found the issue

The import was fine:

import { Switch } from "https://esm.sh/@headlessui/react@1.6.6?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&deps=preact@10.10.0";

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.

Vicens Fayos
  • 740
  • 1
  • 5
  • 18