🚀 Migrating to @module-federation/enhanced v0.21.6 - Feedback Welcome

[jjoshi-space]

TL;DR: After upgrading MF from v0.11.4 → v0.21.6, static imports of remote modules broke (blank screen). Fixed by switching to dynamic import() with async initialization. Looking for feedback on the approach.

Our Setup

• Single-SPA + Module Federation (Rspack)
• Host app + multiple remote apps
• Vue 3, Vuex, vue-router as shared singletons

The Problem

After upgrade:

• Blank screen
• No console errors

Root Cause

Static imports of remote modules evaluated before containers initialized:

host-app/services/index.js

// ❌ BEFORE - broken after upgrade (works @v0.11.4 breaks @0.12.x onwards)
import remoteServiceA from 'remote-app-a/services/serviceA'
export default {
  localService,      // ✅ works (local)
  remoteServiceA,    // ❌ undefined - container not ready
}

Our Fix

Dynamic imports with mutable object pattern:

// ✅ AFTER - works
const services = {
  localService,           // Local services (static import ok)
  remoteServiceA: null,   // Remote services (populated async)
}
export async function initRemoteServices() {
  const [modA] = await Promise.all([
    import('remote-app-a/services/serviceA')
  ])
  // Mutate in place - all references see the update
  services.remoteServiceA = modA.default || modA
}
export default services

Await in Single-SPA lifecycle before app setup:

import services, { initRemoteServices } from './services'
// Start loading immediately (non-blocking)
const remoteServicesReady = initRemoteServices()
const vueLifecycles = singleSpaVue({
  createApp,
  appOptions: { ... },
  async handleInstance(app) {
    await remoteServicesReady  // Block until remotes loaded
    app.use(router)
    app.use(store)
    startup({ app, services, ... })  // Services now populated
  }
})
export const { bootstrap, mount, unmount } = vueLifecycles

Questions

1. Does this align with MF 2.0 best practices?
2. Any gotchas with this pattern in Single-SPA?
3. Better alternatives?

Thanks!