demo · v133

Microfrontend compose — two teams, two maps

Team Shell publishes the layout and registers @shell/router. Team Checkout ships independently and registers @checkout/cart. With Chrome 133+, both can ship their own <script type="importmap"> and the second extends the first — no build-time merge.

map A — team shell

<script type="importmap">
{ "imports": {
  "@shell/router": "/.../shell-router.js",
  "@shell/util":   "/.../shell-util.js"
} }
</script>

map B — team checkout (loaded after)

<script type="importmap">
{ "imports": {
  "@checkout/cart": "/.../checkout-cart.js"
} }
</script>

resolved specifiers (live):

@shell/router → resolving…
@shell/util → resolving…
@checkout/cart → resolving…

before vs after

Pre-133, only one import map per document. Any module imported before it broke the whole app. Microfrontend setups had to either merge maps at build time (couples release schedules) or write a runtime composer in raw JS (couples error handling). With multiple import maps, each microfrontend ships its own and the second extends the first — specifier conflicts surface as errors rather than silent overwrites.

see also

scenario focus

Select a scenario to focus its rendered example and summary.