Module Federation — LoadComponent (host)

Canonical host service path (any host app in the monorepo):

src/core/api/services/module-federation/moduleFederationService.tsx

Reference implementation in this repo: ProjectBaseREACT/self-service-f/src/api/services/module-federation/ (legacy path; prefer src/core/... for new hosts).

Remote MFE example: ProjectBaseREACT/self-service-mf.

Stack: @module-federation/enhanced/runtime, @module-federation/bridge-react.

Bootstrap host service (only if missing)

Before any page uses LoadComponent, ensure the service file exists.

1. Check: src/core/api/services/module-federation/moduleFederationService.tsx
2. If the file already exists → do nothing. Do not edit, refactor, or “improve” it; treat it as frozen infrastructure.
3. If missing → create it by copying verbatim from assets/moduleFederationService.tsx (byte-for-byte; no logic changes).

Required dependencies (host package.json — add only if absent):

"@module-federation/bridge-react": "<match project>",
"@module-federation/enhanced": "<match project>"

Import in pages:

import { LoadComponent } from '@/core/api/services/module-federation/moduleFederationService';
// or relative: '../../../core/api/services/module-federation/moduleFederationService'

Adjust alias (@/core) to the host’s tsconfig paths.

Core API (host)

Usage:

<LoadComponent
  lazyElement={{
    mfe: remote.name,
    url: remote.url,
    component: remote.component,
    type: remote.type,
  }}
  loading={<div>Loading …</div>}
  fallback={({ error }) => <div>Error: {error.message}</div>}
  router={{ navigate }}
  {...hostSpecificProps}
/>

Props after lazyElement forward to the remote root.

Static vs dynamic loading

Static — e.g. host App.tsx profileConfig + one LoadComponent.

Dynamic — map API Remote[] to LoadComponent (stack on one page or one per <Route>).

Legacy examples: self-service-f/src/App.tsx, SelfService.tsx, mock-backend/app/api/remotes/.

Remote MFE (expose)

1. Page component (React UI).
2. Feature.remote.tsx → createBridgeComponent({ rootComponent }) — see reference.md.
3. module-federation.config.ts → exposes: { './Feature': '.../Feature.remote.tsx' }.

Host lazyElement.mfe === remote config name. Host lazyElement.component === expose key without ./.

Checklist — new federated screen

Remote:

• UI + *.remote.tsx bridge
• ./Feature in exposes
• remoteEntry.js served at host url

Host:

• moduleFederationService.tsx exists under src/core/... (bootstrap if not)
• API row or static lazyElement
• LoadComponent + loading / fallback
• router={{ navigate }} when remote navigates

Do not

• Modify moduleFederationService.tsx after install (canonical copy in skill assets/)
• Register remotes manually in pages (LoadComponent handles it)
• Use ./Component in lazyElement.component
• Duplicate the service under another path if src/core/... already has it

Resources