𝗦𝗶𝗻𝗴𝗹𝗲𝗦𝗣𝗔 𝗪𝗼𝗿𝗸𝘀. 𝗜𝗺𝗽𝗼𝗿𝘁 𝗠𝗮𝗽𝘀 𝗗𝗼𝗻'𝘁 𝗠𝗮𝗻𝗮𝗴𝗲 𝗧𝗵𝗲𝗺𝘀𝗲𝗹𝘃𝗲𝘀

SingleSPA works. We run React, Vue, and Angular apps on one page. They load independently. The framework delivers.

The problem is not the framework. The problem is the ecosystem around it.

In a distributed architecture, you need ownership. You need auditing. You need governance. SingleSPA makes these needs visible because the import map is a central point of coordination.

The import map lives in your root config. It is a JSON file. It tells every micro frontend (MFE) which version of React to load. In theory, it is the source of truth. In practice, nobody owns it.

Each team owns their own MFE. No one owns the map.

This creates problems:

  • Teams retire an MFE, but the entry stays in the map.
  • New dependencies appear, but no one adds them to the map.
  • The map rots while you ignore it.

We found an MFE in our map that had not been deployed in eight months. It was dead, but it was still loading in production. No one noticed because no one was looking.

You might think about auto-generating the map during a build. We tried that. It creates a new problem: merge conflicts. If fourteen teams all try to write to one JSON file during every deploy, your CI pipeline becomes a mess.

Another issue is drift. The pattern is simple: mark React as an external in your config. Let the import map serve it. This prevents duplicate bundles.

But then someone refactors their code. They accidentally bundle React back into their MFE. The build passes. The tests pass. The deploy is green.

You only notice when:

  • Bundle sizes spike.
  • A version mismatch breaks a component.
  • You see React loading twice in Chrome DevTools.

We audited our system and found two MFEs shipping their own React. Their builds were green. They had no idea they were out of compliance.

The import map and your package.json files are two separate inputs. They drift apart quietly.

A CI check can find duplicate bundles. It cannot find version mismatches. If MFE A uses React 18.2 and MFE B uses 18.3, the build will not fail. But your shared components will break at runtime.

When we need to update React, we spend hours grepping through fourteen different repositories. This is inefficient.

Tulitengeneza zana ili kutatua hili. Inafanya mambo mawili:

  1. Inatengeneza matrix ya matoleo kutoka kwenye package.json ya kila MFE.
  2. Inalinganisha matrix hiyo na import map yako.

Zana hiyo inakuonyesha pengo lililopo. Inakuonyesha ni timu zipi zinazingatia kanuni na timu zipi zimepoteza mwelekeo. Pia inatafuta rekodi zilizopitwa na wakati na URL zilizoharibika. Tunaiendesha kila Jumatatu asubuhi. Inachukua sekunde 12.

Somo letu halikuwa la kiufundi. Kila usanifu uliotawanyika (distributed architecture) unahitaji mmiliki wa miundombinu ya pamoja. Katika SingleSPA, import map ni miundombinu. Usichukulie kama faili la pamoja. Ichukulie kama rasilimali inayodhibitiwa (managed asset).

Unashughulikiaje hili? Je, una mmiliki wa import map? Au unatumia asubuhi zako za Jumatatu kufanya grepping kwenye faili?

Chanzo: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe