alephjs / aleph.js

The Full-stack Framework in Deno.
https://aleph.deno.dev/
MIT License
5.26k stars 168 forks source link

How to use headlessui #557

Open shrimpy opened 1 year ago

shrimpy commented 1 year ago

Anyone has any idea why i am getting below error?

SSR TypeError: Relative import path "client-only" not prefixed with / or ./ or ../ and not in import map from "https://esm.sh/v120/@headlessui/react@1.7.14/X-ZS8q/deno/react.mjs"
    at https://esm.sh/v120/@headlessui/react@1.7.14/X-ZS8q/deno/react.mjs:2:7
    at async importRouteModule (https://deno.land/x/aleph@1.0.0-beta.43/server/router.ts:38:10)
    at async https://deno.land/x/aleph@1.0.0-beta.43/server/renderer.ts:286:17
    at async Promise.all (index 0)
    at async initSSR (https://deno.land/x/aleph@1.0.0-beta.43/server/renderer.ts:285:19)
    at async Object.fetch (https://deno.land/x/aleph@1.0.0-beta.43/server/renderer.ts:26:41)
    at async routeHandler (https://deno.land/x/aleph@1.0.0-beta.43/server/handler.ts:347:14)
    at async Server.#respond (https://deno.land/std@0.180.0/http/server.ts:299:18)

import_map.json

{
  "imports": {
    "~/": "./",
    "std/": "https://deno.land/std@0.180.0/",
    "aleph/": "https://deno.land/x/aleph@1.0.0-beta.43/",
    "aleph/react": "https://deno.land/x/aleph@1.0.0-beta.43/framework/react/mod.ts",
    "aleph/plugins/react": "https://deno.land/x/aleph@1.0.0-beta.43/framework/react/plugin.ts",
    "aleph/plugins/deploy": "https://deno.land/x/aleph@1.0.0-beta.43/plugins/deploy.ts",
    "aleph/dev": "https://deno.land/x/aleph@1.0.0-beta.43/server/dev.ts",
    "aleph/server": "https://deno.land/x/aleph@1.0.0-beta.43/server/mod.ts",
    "react-dom": "https://esm.sh/v120/react-dom@18.2.0",
    "react-dom/": "https://esm.sh/v120/react-dom@18.2.0/",
    "react": "https://esm.sh/v120/react@18.2.0",
    "@headlessui/react": "https://esm.sh/v120/*@headlessui/react@1.7.14"
  },
  "scopes": {}
}

usage:

import { Transition } from "@headlessui/react";

...
...
  <Transition>
  ...
  </Transition>

turn SSR off and seeing similar error from browser console

client.ts:24 Uncaught (in promise) TypeError: Failed to resolve module specifier "client-only". Relative references must start with either "/", "./", or "../".
await (async)
(anonymous) @ main.ts:3
ije commented 1 year ago

try to use deno task esm add @headlessui/react