Strange Problem with import-map-overrides #145

PDGallus · 2024-05-27T11:18:11Z

PDGallus
May 27, 2024

Hello everyone!
Today I stumbled across a strange problem. When I use the plugin, the import-map and the import-map-overrides are added for me in the index.html as a script at the very beginning. However, import-map-overrides does not work correctly because the modules from the import-map are not displayed. If I now add the same script tag for import-map-overrides to the index.html again, the modules are displayed! Does anyone have an explanation for this?

Have two script blocks which imports import-map-overrides results in an error in the browser console. That's kind of ugly and suggests, that something isn't working properly, which is not the case.

My vitePluginSingleSpa config:

vitePluginSingleSpa({
  type: 'root',
  importMaps: {
    type: 'systemjs-importmap',
    dev: ['./importMaps.dev.json', './importMaps.shared.json'],
    build: ['./importMaps.json', './importMaps.shared.json'],
  },
  imo: '3.1.1',
  imoUi: {
    buttonPos: 'bottom-right',
    localStorageKey: 'devtools',
    variant: 'full',
  },
})

My index.html head looks like this:

<head>
  <!-- vite-plugin adds import-map here -->
  <script type='systemjs-importmap'>...</script>
  <!-- vite-plugin adds import for import-map-overrides here -->
  <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/[email protected]/dist/import-map-overrides.js'>. 
  </script>
  ...
  <meta name='importmap-type' content='systemjs-importmap' />
  <!-- line below needed to get import-map-overrides to work -->
  <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/[email protected]/dist/import-map-overrides.js'>. 
  </script>
  <!-- now I import systemjs and so on -->
  ...
</head>

What I can't understand is that the two script tags, which are loading import-map-overrides, are completely indentical. I copied the script tag, which was created by the plugin and past it into the index.html. But as I said, it only works, if I have the second script for importing import-map-overrides in there. Am I missing something?
I doubt myself, not the plugin!

I am grateful for any advice.

webJose · 2024-05-27T15:22:29Z

webJose
May 27, 2024
Maintainer

Hello. Question for you. This meta tag:

<meta name='importmap-type' content='systemjs-importmap' />

Are you adding it? If yes, are you adding it because it is required by import-map-overrides?

5 replies

PDGallus May 28, 2024
Author

Hello José! Good question. The root configuration was created by the single-spa script, and I use most of the index.ejs and converted it to an index.html. So, without being absolutely sure, I assume the meta tag was added by the script. From what I've read so far, this is needed to make the browser realize that I'm using systemjs-importmap.
By the way, what is your opinion on importmap or systemjs-importmap? All browsers now seem to support the “native” import maps.

webJose May 28, 2024
Maintainer

Hello. I checked the code for this plug-in, and the <meta> tag doesn't come from this plug-in. I wonder if it messes up with import-map-overrides. The tag seems to only be needed for the server-sided configurations of import-map-overrides.

My guess is that if you open your index file, it will be there. Delete it.

My opinion should be pretty evident from all over this plug-in's documentation: Native ES modules. As a matter of fact, I have never, not once, tested the plug-in with SystemJS modules. I have heard from people over the Slack server it works, but I have never done a single test on it. All development and testing has been done using native ES modules with native import maps.

PDGallus May 28, 2024
Author

Hi. Thanks for the reply. I will delete it and test it again. 😊

PDGallus May 29, 2024
Author

Hmm, sadly if I delete the <meta> nothing changes. I still need both, the<meta>and the additional <script> for loading import-map-overrides.
Do you have an example of using native import map and esm module, so I could compare my vite config in the applications and the root-config to see, what I should change? I still have problems switching my utility module from webpack to vite. Is there anything special to be aware of?

webJose May 29, 2024
Maintainer

I don't have an example submitted, but it is and works exactly as shown in the documentation. Just 2 properties set: type and imo. It is how I have it at work. The project uses all native ES modules.

Strange Problem with import-map-overrides #145

Uh oh!

Uh oh!

PDGallus May 27, 2024

Replies: 1 comment · 5 replies

Uh oh!

Uh oh!

webJose May 27, 2024 Maintainer

Uh oh!

PDGallus May 28, 2024 Author

Uh oh!

webJose May 28, 2024 Maintainer

Uh oh!

PDGallus May 28, 2024 Author

Uh oh!

Uh oh!

PDGallus May 29, 2024 Author

Uh oh!

webJose May 29, 2024 Maintainer

PDGallus
May 27, 2024

Replies: 1 comment 5 replies

webJose
May 27, 2024
Maintainer

PDGallus May 28, 2024
Author

webJose May 28, 2024
Maintainer

PDGallus May 28, 2024
Author

PDGallus May 29, 2024
Author

webJose May 29, 2024
Maintainer