Skip to content
This repository was archived by the owner on Feb 26, 2025. It is now read-only.

Fallbacks for failed URLs? #293

Open
trusktr opened this issue Oct 1, 2023 · 2 comments
Open

Fallbacks for failed URLs? #293

trusktr opened this issue Oct 1, 2023 · 2 comments

Comments

@trusktr
Copy link

trusktr commented Oct 1, 2023

The biggest hassle I have so far with managing import maps by hand is that, depending on the install method, modules can be nested, or not.

The issue:

Sometimes I bootstrap a bunch of packages with Lerna. This results in:

my-app/
  node_modules/
    A/
      node_modules/
        B/

because B is a dependency of A, and A is symlinked into my-app by Lerna (where my-app is one of multiple projects managed by Lerna in, for example, a monorepo).

This leads me to write an importmap like so:

<script type="importmap">
{
  "imports": {
    "A": "/node_modules/A/index.js",
    "B": "/node_modules/A/node_modules/B/index.js",
  }
}
</script>

Other times, if I run npm install directly inside of my-app then I get flat modules:

my-app/
  node_modules/
    A/
    B/

This leads me to write an importmap like so:

<script type="importmap">
{
  "imports": {
    "A": "/node_modules/A/index.js",
    "B": "/node_modules/B/index.js",
  }
}
</script>

If I have the first importmap in my project, and then perform an flat install, it breaks. If I have the second importmap in my project and perform a linked install, it breaks.

Is there a solution to this?

Maybe I'm missing something, but do scopes solve this? If so, I haven't had any luck yet, and from the text, it seems like the provide an absolute final mapping, not that failed fetches would fall back.

What I'm imagining here is that a mechanism would try the scoped value, it gets a failure, then falls back like scope does. If this is already the case, I can't get it to work.

I've tried the following, hoping that it would fall back on a failure, so that it works with either install method without needing to update the importmap every time I change install method:

<script type="importmap">
{
  "imports": {
    "A": "/node_modules/A/index.js",
    "B": "/node_modules/B/index.js",
  },
  "scopes": {
    "/node_modules/A/": {
      "B": "/node_modules/A/node_modules/B/index.js",
    }
  }
}
</script>
@trusktr
Copy link
Author

trusktr commented Oct 1, 2023

A workaround is to make all the transitive dependencies be direct dependencies of my-app in its package.json, so that Lerna will place them at the top level of node_modules besides in the linked modules, then the install format won't matter.

I suppose this workaround does make dependencies more "wholesomely" in my control as the app author.

@trymeouteh
Copy link

trymeouteh commented Jan 25, 2025

Would like to see fallback url options for when a url fails to fetch the script.

This is my suggestion on how to structure it...

{
  "imports": {
    "moment": [
        "https://cdn1.com/moment/moment.js",
        "https://cdn2.com/moment/moment.js",
        "https://cdn3.com/moment/moment.js"
  ]
}

And also hashing should be considered as well with fallback URLs.
#302

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants