import-map-injector

import-map-injector is a browser library that adds a couple features to browser-native import maps:

1. Support for multiple import maps on one page (by combining them into a single import map)
1. Support for external import maps

The way this is accomplished is by combining multiple elements into a final .

Installation

The import-map-injector.js file must execute before any ES module is loaded by the browser. Therefore, it's encouraged to load import-map-injector.js via elements.

``html






`

$3

As noted above, it's often easier to install import-map-injector via script rather than npm. Be aware that you might need to bundle/import import-map-injector separately from any web app you're trying to load, since import map installation is required before loading ES modules.

With those caviats in mind, import-map-injector is also available on npm:

`sh
npm install @single-spa/import-map-injector
`

#### When bundling

The following information only applies if you're trying to bundle import-map-injector via webpack, rollup, esbuild, etc. It doesn't apply in other contexts:

Then it should just be included in your browser bundle with the following import.

`js
import "@single-spa/import-map-injector";
`

It's better for performance to put the import statement at the top of your bundler's main entry file, since import map installation is crucial to page load times.

Usage

import-map-injector combines multiple elements into a final element, which is injected into the element of the web page. The browser spec for import maps requires the to be injected before any ES modules are loaded via





`

After import map installation finishes, your HTML page will have an additional






`

Once import map installation has finished, you can proceed with loading modules via import().

$3

As per the Import Maps spec, no ES modules can be loaded until import map installation is completed. This means that you cannot use





`

#### Asynchronous import map installation

When using external import maps, import-map-injector must wait for the network request(s) loading external import map(s) to complete before it can install the browser-native import map. This means you cannot use




`

Compatibility

import-map-injector is compatible with import-map-overrides@>=4.1.0 via an in-code integration. To use the two projects together, do the following:

1. Load import-map-overrides.js before import-map-injector.js

`html



`

2. Add the use-injector attribute to the element that configures import-map-overrides. See import-map-overrides docs for more details

`html

``