Error upgrading headlessui

Hello! I'm trying to upgrade headlessui/react to version 2.0.4 and running into an error.

error: Relative import path "@floating-ui/react" not prefixed with / or ./ or ../ and not in import map from "https://esm.sh/v135/@headlessui/react@2.0.4/X-YS9jbGllbnQtb25seTpwcmVhY3QvY29tcGF0LHJlYWN0LWRvbTpwcmVhY3QvY29tcGF0LHJlYWN0OnByZWFjdC9jb21wYXQKZS8q/denonext/react.mjs"
    at https://esm.sh/v135/@headlessui/react@2.0.4/X-YS9jbGllbnQtb25seTpwcmVhY3QvY29tcGF0LHJlYWN0LWRvbTpwcmVhY3QvY29tcGF0LHJlYWN0OnByZWFjdC9jb21wYXQKZS8q/denonext/react.mjs:6:24361

error: Relative import path "@floating-ui/react" not prefixed with / or ./ or ../ and not in import map from "https://esm.sh/v135/@headlessui/react@2.0.4/X-YS9jbGllbnQtb25seTpwcmVhY3QvY29tcGF0LHJlYWN0LWRvbTpwcmVhY3QvY29tcGF0LHJlYWN0OnByZWFjdC9jb21wYXQKZS8q/denonext/react.mjs"
    at https://esm.sh/v135/@headlessui/react@2.0.4/X-YS9jbGllbnQtb25seTpwcmVhY3QvY29tcGF0LHJlYWN0LWRvbTpwcmVhY3QvY29tcGF0LHJlYWN0OnByZWFjdC9jb21wYXQKZS8q/denonext/react.mjs:6:24361

Here is what my deno.json looked like previously, which was importing

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.8/",
    "kysely": "https://cdn.jsdelivr.net/npm/kysely/dist/esm/index.js",
    "kysely/": "https://cdn.jsdelivr.net/npm/kysely/dist/esm/",
    "kysely-deno-postgres": "https://raw.githubusercontent.com/will-weiss/kysely-deno-postgres/main/mod.ts",
    "preact": "https://esm.sh/preact@10.20.1",
    "preact/": "https://esm.sh/preact@10.20.1/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.1.0",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
    "fresh_session": "https://deno.land/x/fresh_session@0.2.2/mod.ts",
    "redis": "https://deno.land/x/redis@v0.30.0/mod.ts",
    "std/": "https://deno.land/std@0.214.0/",
    "tailwindcss": "npm:tailwindcss@3.3.5",
    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
    "@tailwindcss/forms": "npm:@tailwindcss/forms@0.5.7",
    "@headlessui/react": "https://esm.sh/*@headlessui/react@1.7.17?alias=react:preact/compat,react-dom:preact/compat,client-only:preact/compat",
    "react": "https://esm.sh/preact@10.20.1/compat"
  }
}

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.8/",
    "kysely": "https://cdn.jsdelivr.net/npm/kysely/dist/esm/index.js",
    "kysely/": "https://cdn.jsdelivr.net/npm/kysely/dist/esm/",
    "kysely-deno-postgres": "https://raw.githubusercontent.com/will-weiss/kysely-deno-postgres/main/mod.ts",
    "preact": "https://esm.sh/preact@10.20.1",
    "preact/": "https://esm.sh/preact@10.20.1/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.1.0",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
    "fresh_session": "https://deno.land/x/fresh_session@0.2.2/mod.ts",
    "redis": "https://deno.land/x/redis@v0.30.0/mod.ts",
    "std/": "https://deno.land/std@0.214.0/",
    "tailwindcss": "npm:tailwindcss@3.3.5",
    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
    "@tailwindcss/forms": "npm:@tailwindcss/forms@0.5.7",
    "@headlessui/react": "https://esm.sh/*@headlessui/react@1.7.17?alias=react:preact/compat,react-dom:preact/compat,client-only:preact/compat",
    "react": "https://esm.sh/preact@10.20.1/compat"
  }
}

Any ideas? Thanks in advance!

2 Replies

Deno AI Helper•4mo ago

I wasn't able to find the answer to your question in the official Deno documentation. However, based on the error message you provided, it seems like the import path for @floating-ui/react is not correctly formatted. In Deno, relative import paths must be prefixed with /, ./, or ../. If @floating-ui/react is meant to be an external module, it should be included in your import map with a full URL. In your deno.json import map, I don't see an entry for @floating-ui/react. You might need to add an entry for it, similar to how you've mapped other packages. For example:

"@floating-ui/react": "https://esm.sh/@floating-ui/react@version"

"@floating-ui/react": "https://esm.sh/@floating-ui/react@version"

Replace version with the specific version you want to import. Please note that this advice is not based on the Deno documentation, and I would advise you to double-check the accuracy of the advice given. It's also possible that there might be other issues or context that I'm not aware of, so please consider this as a potential starting point for troubleshooting the issue.

Helpful Links: Deno 1.38: HTML doc generator and HMR Deno 1.31: package.json support Deno 1.30: Built-in Node modules Deno 1.32: Enhanced Node.js Compatibility Fresh 1.2 – welcoming a full-time maintainer, sharing state between islands, limited npm support, and more Updating Fresh | Fresh docs

MaDsEn•4mo ago

When you use the * inside the imported package it will retrieve packages that is also used in this case floating ui react, so try Importing that also with wrapping it with the alias, but without the *, but I know a lot of people have trouble with headless ui after the new version came out https://discord.com/channels/684898665143206084/991511118524715139/1240955650352349205, so some go back to a previous version for now

Discord

Discord - Group Chat That’s All Fun & Games

Discord is great for playing games and chilling with friends, or even building a worldwide community. Customize your own space to talk, play, and hang out.