在 Deno+Fresh 项目中添加 Headless-ui 时出错

Question

我有一个

Deno+Fresh

项目，将

headlessui

添加到我的 Fresh 项目时出现以下错误：

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

我阅读了以下讨论，显然解决了我的问题...https://github.com/denoland/fresh/discussions/606

但我无法让它发挥作用。

为了调试问题，我创建了一个演示项目（https://github.com/datracka/test-headlessui2）

这只是一个用

deno run -A -r https://fresh.deno.dev my-project

创建的新项目，我刚刚添加了一个新岛

MySwitch

，直接导入

headlessui

模块，如 github 讨论线程中所述。

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>
  );
}

使用

deno task start

运行项目时会引发上述错误。

我错过了什么？

感谢您的帮助和时间！

Answer 1

发现问题

进口没问题：

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

只需在您的

preact

项目中考虑

Fresh

的当前版本。否则它们会发生碰撞并因此引发上述错误。

就我而言，当前版本是

10.11.0

而不是

10.10.0

我希望它对某人有帮助。

Answer 2

以下导入使 HeadlessUI 对我有用：

  "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",

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

如此处所示：https://github.com/perguth/denoland-merch