Hint
Shared dependencies, consistent UX, cross-app communication, testing boundaries, and operational complexity
Microfrontends solve team scaling but introduce their own hard problems:
1. Shared dependency versioning — if host runs React 18 and a remote ships React 17, you get two React instances, breaking hooks. Module Federation's singleton: true mitigates this but requires version alignment.
2. Design consistency — each team owns their UI; without a shared design system and component library, UX fragments across the product.
3. Cross-app communication — apps can't share React state. Common patterns: Custom Events (browser), a shared event bus, or URL/query params.
4. CSS isolation — global styles bleed between apps. Fix: CSS Modules, shadow DOM, or a strict CSS-in-JS approach per team.
5. Testing — integration tests across independently deployed apps are hard. E2E tests must orchestrate multiple services.
6. Performance — multiple independent bundles, multiple network requests, risk of dependency duplication. Module Federation helps but requires careful shared config.
7. Operational overhead — N deploys, N monitoring setups, N CI pipelines. The team must be large enough to justify this cost.