rabbit_rabbit
rabbit_rabbit7mo ago

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
Deno AI Helper7mo 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.
MaDsEn
MaDsEn7mo 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.

Did you find this page helpful?