single-spa / import-map-overrides

A browser and NodeJS javascript library for overriding import maps
MIT License
335 stars 47 forks source link

jsdelivr request when devtools are available #107

Open lhtdesignde opened 2 months ago

lhtdesignde commented 2 months ago

Hi, I'm seeing some really strange behavior that I cannot seem to figure out.

I moved away from jsdelivr and host some scripts myself. Among them are regenerator-runtime.0.14.1.min.js, import-map-overrides.3.1.1.js, systemjs.6.15.1.min.js and single-spa.6.0.1.min.js.

I use import map overwrites and activate them in the HTML with: <import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>

All scripts are loaded fine but as soon as this is active and I got import-map-overrides.3.1.1.js, it injects single-spa.dev.js from jsdelivr! How can i prevent this? Here is my systemjs import map and i'm clearly linking to my local CDN. DO you use like a fallback to jsdelivr? I couldn't find it anywhere in the scripts. How can I overwrite this?

  <script type="systemjs-importmap" id="external-map">
  {
    "imports": {
      ...,
      "react": "https://ga.system.jspm.io/npm:react@18.3.1/index.js",
      "react-dom": "https://ga.system.jspm.io/npm:react-dom@18.3.1/index.js",
      "single-spa": "https://self-hosted/single-spa.6.0.1.min.js"
    },
    "scopes": {
      "https://ga.system.jspm.io/": {
        "@babel/runtime/helpers/esm/classCallCheck": "https://ga.system.jspm.io/npm:@babel/runtime@7.24.0/helpers/esm/classCallCheck.js",
        "@babel/runtime/helpers/esm/createClass": "https://ga.system.jspm.io/npm:@babel/runtime@7.24.0/helpers/esm/createClass.js",
          ...
      }
    }
  }
  </script>

It also seems like it's injecting a second import map with the following content. I guess this is where it comes from but that doesn't exlain why it's from jsdelivr. And I just realized that also it's injecting an old react version. I'm on 18.3.1 already.

<script type="systemjs-importmap" id="import-map-overrides" data-is-importmap-override="">{
  "imports": {
    "react-dom": "https://ga.system.jspm.io/npm:react-dom@18.2.0/index.js",
    "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@6.0.1/lib/es2015/system/single-spa.dev.js",
    "react": "https://ga.system.jspm.io/npm:react@18.2.0/index.js"
  },
  "scopes": {}
}</script>

Thanks for your help!

webJose commented 3 weeks ago

Since you probably won't get an answer from the single-spa team, I'll give it a shot: This package has the ability to switch to "dev" versions of libraries. If you look closely, the injected URL for "single-spa" has the extension ".dev.js". I can only assume that it is this feature the one getting in your way.

Search the docs up and down. I don't know exactly where I read this a long time ago, but I do recall reading about this, so it must be there somewhere.

lhtdesignde commented 3 weeks ago

Thanks for taking the time to point me in a direction. This is exactly the issue i'm facing. system js detects that i'm in dev mode and then injects the dev version of the scripts. Unfortunately it somehow falls back to jsdelivr. I searched the scripts and couldn't find any reference to jsdelivr. I will need to check if there is a way to specify the dev version of a script in the import map because at the moment it injects the import map with the dev versions as soon as devtools is true in local storage.