https://github.com/adamsondavid/vite-plugin-dynamic-importmap
A Vite plugin that enables dynamic importmap loading by ensuring the importmap is fetched at runtime and gets applied before any other JavaScript runs
https://github.com/adamsondavid/vite-plugin-dynamic-importmap
importmap microfrontends vite vite-plugin
Last synced: 11 months ago
JSON representation
A Vite plugin that enables dynamic importmap loading by ensuring the importmap is fetched at runtime and gets applied before any other JavaScript runs
- Host: GitHub
- URL: https://github.com/adamsondavid/vite-plugin-dynamic-importmap
- Owner: adamsondavid
- License: mit
- Created: 2025-04-07T16:17:04.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-04-11T22:35:49.000Z (11 months ago)
- Last Synced: 2025-04-12T19:16:35.827Z (11 months ago)
- Topics: importmap, microfrontends, vite, vite-plugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vite-plugin-dynamic-importmap
- Size: 118 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-dynamic-importmap
[](https://www.npmjs.com/package/vite-plugin-dynamic-importmap)
✨ A Vite plugin that enables dynamic importmap loading by ensuring the importmap is fetched at runtime and gets applied before any other JavaScript runs.
## 🚀 Motivation
When using [Importmaps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap), it's critical that the map is present in the DOM before any module scripts are executed.
> An import map is used to resolve module specifiers in static and dynamic imports, and therefore must be declared and processed before any `` elements that import modules using specifiers declared in the map.
> — [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)
This becomes a problem when the importmap is not inline, but instead served as a remote file (e.g., fetched from an application server or is hosted statically).
Vite by default injects all module scripts directly into the HTML, which means they might load before your importmap is available.
That's where `vite-plugin-dynamic-importmap` comes in! ✅
## 🧩 What this plugin does
1. Removes all script entries from your `index.html` during build.
2. Injects a new script that:
- Dynamically loads the importmap from a given URL.
- Re-inserts the original scripts after the importmap has been processed.
This guarantees the importmap is applied before any JavaScript module runs — just like the spec intends. 🧠
## ✨ Installation
```sh
npm install -D vite-plugin-dynamic-importmap
```
## 🛠️ Usage
In your `vite.config.ts`:
```typescript
import { defineConfig } from "vite";
import dynamicImportmap from "vite-plugin-dynamic-importmap";
export default defineConfig({
plugins: [dynamicImportmap("./importmap.json")],
});
```
> 💡 `./importmap.json` is not resolved or transformed by Vite.
> Just place it in the `public/` folder (or put it on any server).
## 💬 Why not just inline the importmap?
Inlining works great for static importmaps.
But sometimes you might want to update importmaps without rebuilding the app, e.g. when deploying the same microfrontend root-config to different environments.
## 🙏 Credits
Created with ❤️ by [@adamsondavid](https://github.com/adamsondavid).
PRs, issues, and stars are always welcome ⭐
## 📄 License
[MIT](LICENSE)