Placeholders in links in import_map

[synalice]

I am creating a Fresh project. I wanted to use react-icons and found a working solution — you need to import https://esm.sh/react-icons@4.4.0/?alias=react:preact/compat&deps=react.

Furthermore, I've decided to use an import map like this instead of pasting this long https://esm.sh link everywhere:
"icons": "https://esm.sh/react-icons@4.4.0/?alias=react:preact/compat&deps=react"

It works, but to actually use any icons, you would need to do something like this (how it is done in Node): import { FaBeer } from 'react-icons/fa';
With the https://esm.sh link you would need to import it like this:
https://esm.sh/react-icons@4.4.0/fa?alias=react:preact/compat&deps=react.

How do I import the necessary submodule with the import map instead of doing this:

{
    "imports": {
        "icons-fa": "https://esm.sh/react-icons@4.4.0/fa?alias=react:preact/compat&deps=react",
        "icons-go": "https://esm.sh/react-icons@4.4.0/go?alias=react:preact/compat&deps=react",
        "icons-whatever": "https://esm.sh/react-icons@4.4.0/whatever?alias=react:preact/compat&deps=react"
    }
}

[zachauten]

I'm not sure what the problem you're trying to solve is. Are you trying to factor out the path from your import map urls? I don't believe you can do that.

[jollytoad]

I had a similar issue recently and discovered that esm.sh now has a path parameter for this purpose, but I don't think it's well documented, eg:

https://esm.sh/react-icons@4.4.0?alias=react:preact/compat&deps=react&path=/

So in your import map use a trailing slash:

{
    "imports": {
        "react-icons/": "https://esm.sh/react-icons@4.4.0?alias=react:preact/compat&deps=react&path=/",
    }
}

and then your imports will be exactly as they were for Node.

[jollytoad]

If you're not familiar with the trailing slash, here's the import-maps spec for that: https://github.com/WICG/import-maps#packages-via-trailing-slashes

[marcushultman]

deno run "https://esm.sh/react-icons@4.4.0/fa?alias=react:preact/compat&deps=react"
trigger this error for me:

error: Uncaught SyntaxError: The requested module '/v95/react-icons@4.4.0/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0CmQvcmVhY3RAMTguMi4w/deno/lib/esm/iconContext.js' does not provide an export named 'DefaultContext'
    at <anonymous> (https://esm.sh/v95/react-icons@4.4.0/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0CmQvcmVhY3RAMTguMi4w/deno/lib/esm/iconBase.js:2:264)