> Markdown version of [/videos/298-micro-frontends-with-module-federation-beyond-the-basics?t=2](https://www.wearedevelopers.com/videos/298-micro-frontends-with-module-federation-beyond-the-basics?t=2). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Micro-Frontends with Module Federation: Beyond the Basics

Scaling micro-frontends often introduces complex dependency and routing nightmares. Master Webpack 5 Module Federation to dynamically assemble remote modules, prevent version clashes, and orchestrate multi-framework legacy migrations.

- **Speakers:** [Manfred Steyer](https://www.wearedevelopers.com/@manfred-steyer)
- **Event:** JavaScript Congress
- **Published:** November 24, 2021
- **Duration:** 44:35
- **URL:** https://www.wearedevelopers.com/videos/298-micro-frontends-with-module-federation-beyond-the-basics

## Summary

Micro-frontends allow large engineering organizations to scale by enabling separate teams to deploy features independently and work with optimized agility. However, because end users still expect a cohesive application journey, developers must orchestrate complex runtime integrations. Webpack 5's Module Federation natively bridges this gap, making the runtime assembly of independently deployed single-page applications seamless without resorting to heavy framework workarounds.

Moving beyond basic implementations introduces advanced architectural challenges, particularly around dependency conflicts and routing complexities. Webpack effectively handles version mismatches through built-in smart strategies, such as resolving to the highest compatible version or strictly enforcing dependency singletons to gracefully fail fast if a critical mismatch occurs. To scale even further, "Dynamic Federation" replaces static, hardcoded imports with helper functions that fetch remote module manifests at runtime via a backend or configuration file, entirely decoupling the shell from the micro-frontends it consumes.

When adopting this architecture, engineering teams must evaluate their repository strategies. While multiple repositories offer strict domain boundaries natively, they elevate the risk of version clashes and complicate library sharing. Conversely, monorepos ease code sharing but rely heavily on strict access linting rules—such as those provided by Nx—to prevent cross-domain bleeding. For organizations facing massive legacy systems, Module Federation uniquely enables "Frankenstein architectures" that mix Angular, React, and Vue inside wrapper components, proving highly valuable for executing gradual stack migrations. Ultimately, shifting compiled dependencies to runtime means that rigorous and robust integration testing becomes critical for success.

**Keywords:** micro-frontends, module federation, webpack 5, runtime integration, version mismatch strategies, dynamic federation, monorepo vs polyrepo, nx access restrictions, dependency singletons, framework wrapper components, gradual stack migration, micro-frontend integration testing, lazy loading architecture, angular routing configuration

## Chapters

1. **Overcoming team scaling challenges with module federation** (00:02) — Splitting large applications into decentralized micro frontends improves team agility while maintaining a unified customer experience.
1. **Configuring webpack module federation for hosts and remotes** (04:40) — Using exposed files and dynamic imports seamlessly integrates separate applications at runtime without complex framework workarounds.
1. **Demonstrating runtime integration and shared library loading** (11:04) — Inspecting browser network traffic reveals how micro frontends lazy load remote bundles while sharing common framework dependencies.
1. **Resolving dependency version mismatches in micro frontends** (13:45) — Built-in webpack strategies like semantic version checking and strict singletons prevent conflicting library variations within shared host environments.
1. **Implementing dynamic federation for unknown runtime remotes** (20:41) — Utilizing helper functions and the webpack runtime API allows shell applications to dynamically discover and mount unknown endpoints.
1. **Evaluating monorepo and polyrepo architectures for micro frontends** (29:06) — Engineering teams must choose between the strict boundary isolates of multiple repositories and simplified dependency management of unified monorepos.
1. **Integrating multiple framework versions via wrapper components** (35:17) — Bootstrapping diverse single-page applications inside a unified shell requires dynamic DOM mounting and specialized router synchronization protocols.
1. **Summarizing module federation patterns and architectural choices** (42:08) — Advanced frontend setups leverage dynamic loading and framework agnosticism while demanding careful repository and dependency governance.

## Related Moments

- [Micro frontends and Webpack module federation challenges](https://www.wearedevelopers.com/videos/1018-native-federation-the-future-of-micro-frontends-and-plugin-systems-in-angular) (from "Native Federation: The Future of Micro Frontends and Plugin-Systems in Angular")
- [Implementing micro frontends with webpack module federation](https://www.wearedevelopers.com/videos/165-micro-frontends-with-module-federation-why-and-how) (from "Micro Frontends with Module Federation: Why and How?")
- [Answering questions on micro-frontend adoption and tooling](https://www.wearedevelopers.com/videos/299-micro-frontends-anti-patterns) (from "Micro-frontends anti-patterns")
- [Enabling framework-agnostic modularity with Webpack module federation](https://www.wearedevelopers.com/videos/130-front-end-micro-apps) (from "Front-End Micro Apps")
- [Delivering remote modules with Webpack Module Federation](https://www.wearedevelopers.com/videos/318-destructuring-frontend-monoliths-with-microfrontends) (from "Destructuring Frontend monoliths with MicroFrontends")
- [Combining micro frontends and the modular monolith pattern](https://www.wearedevelopers.com/videos/492-stairway-to-heaven-scaling-frontends-the-right-way) (from "Stairway to Heaven - Scaling Frontends the Right Way")

## Related Articles

- [Dev Digest 138 - Are you secure about this?](https://www.wearedevelopers.com/magazine/486-dev-digest-138-are-you-secure-about-this)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [Why You Shouldn’t Build a Microservice Architecture](https://www.wearedevelopers.com/magazine/118-why-you-shouldn-t-build-a-microservice-architecture)
- [Dev Digest 136 - No JS(on) of mine](https://www.wearedevelopers.com/magazine/482-dev-digest-136-no-js-on-of-mine)

## Related Jobs

- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**