MatissJanis/module-federation-singleton-import-issue

★ 0Forks 0JavaScriptGitHub ↗Compare

README

Repro: Module Federation singleton split of a module-level React context

Minimal rspack + @module-federation/enhanced reproduction:

Could not find FeatureTypeContext, did you forget to use its provider ?

A module-level React context is shared as a singleton, yet ends up as two instances across host and remote compilations. Module Federation negotiates sharing by request specifier, not resolved file identity — relative imports never match the canonical share key.

npm install
npm run build
npm run serve    # http://localhost:8090

Layout

  • packages/context-lib — owns FeatureTypeContext; provider uses relative './FeatureTypeContext'
  • packages/consumer-lib — consumer uses relative '../context-lib/FeatureTypeContext'
  • apps/host — imports @repro/consumer-lib; loads remote ./FeaturePage
  • apps/remote (container a_remote, sorts before host for singleton tie-break) — exposes provider + consumer tree

Workaround

Changing the provider's relative import to the package specifier fixes the bug:

- import { FeatureTypeContext } from './FeatureTypeContext';
+ import { FeatureTypeContext } from '@repro/context-lib/FeatureTypeContext';

Both compilations then request the same share key (@repro/context-lib/FeatureTypeContext) and receive a single context instance. This does not scale well to large, non-greenfield repositories where hundreds of files already use relative imports and retrofitting every one to a canonical package path is impractical.

Contributors

MatissJanis

Issues