SingleSPA Works. Import Maps Don't Manage Themselves

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.

We built a tool to fix this. It does two things:

  1. It builds a version matrix from every MFE's package.json.
  2. It compares that matrix against your import map.

The tool shows you the gap. It shows you which teams are compliant and which teams have drifted. It also finds stale entries and broken URLs. We run it every Monday morning. It takes 12 seconds.

Our lesson was not technical. Every distributed architecture needs an owner for shared infrastructure. In SingleSPA, the import map is infrastructure. Do not treat it like a shared file. Treat it like a managed asset.

How do you handle this? Do you have an import map owner? Or do you spend your Monday mornings grepping files?

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