> Markdown version of [/videos/1431-the-dependency-cookbook-recipes-for-micro-frontend-success](https://www.wearedevelopers.com/videos/1431-the-dependency-cookbook-recipes-for-micro-frontend-success). 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).

---

# The Dependency Cookbook - Recipes for Micro Frontend success

Are shared dependencies turning your micro frontends into a fragile monolith? Discover how to leverage browser import maps and Webpack Module Federation to completely eliminate cascading upgrade failures.

- **Speakers:** [Lucas Braeschke](https://www.wearedevelopers.com/@lucas-braeschke), [Stefan Bley](https://www.wearedevelopers.com/@stefan-bley)
- **Event:** World Congress 2025
- **Published:** August 20, 2025
- **Duration:** 21:06
- **URL:** https://www.wearedevelopers.com/videos/1431-the-dependency-cookbook-recipes-for-micro-frontend-success

## Summary

Adopting a micro frontend (MFE) architecture offers significant organizational benefits, particularly in industries with heavy regulatory and deployment burdens like healthcare. While breaking a monolith into modular components allows for independent release cycles and polyglot technologies (like mixing React and Angular), it introduces the critical challenge of frontend dependency management. Over-sharing dependencies from an overarching app shell can backfire into cascading upgrade failures. When a central framework updates, modules that lack the maintenance budget to upgrade might break, ultimately forcing engineering teams to sacrifice business functionality for underlying technical constraints.

Despite these architectural risks, sharing code remains essential to optimize heavy bundle sizes, enforce UI design consistency, apply automated security patches centrally, and prevent compatibility errors. The complexity of sharing largely depends on the library: simple utilities load cleanly, frameworks like Angular create tricky global variables, and strict singletons like web components or `pdf.js` completely reject duplicated runtime instances. These singleton conflicts are particularly dangerous because they often fail late in the development cycle, only revealing themselves when a second module attempts to instantiate the library within the same browser session. 

To safely resolve these versioning conflicts without bleeding contexts, architects lean on two primary distribution strategies. Browser import maps provide a native web-platform solution to resolve ES modules directly to CDNs, representing a positive industry trend toward using default standards over heavy build tools. While import maps are excellent for lazy-loading distinct versions cleanly side-by-side, current implementations restrict documents to a single global map, limiting scalability for large applications. For extensive module ecosystems, Webpack Module Federation offers a sophisticated, framework-agnostic alternative. It automatically assesses semantic versioning requirements at runtime, executing built-in version negotiation that allows individual micro frontends to cleanly load self-sufficient fallbacks if the central app shell introduces breaking changes.

**Keywords:** micro frontend architecture, frontend dependency management, shared frontend dependencies, app shell integration, module federation framework, browser import maps, javascript bundle optimization, resolving singleton conflicts, ui ecosystem consistency, dependency version negotiation, webpack module federation, es6 runtime imports, managing global variables, frontend security patching

## Chapters

1. **Modularizing applications for strict healthcare compliance** (00:05) — Strict healthcare requirements drive the need for independent micro frontend release processes.
1. **The maintenance cost of forced dependency updates** (02:46) — Tightly coupled dependencies force business teams to sacrifice functionality for technical upgrades.
1. **Core reasons for sharing micro frontend dependencies** (03:51) — Sharing dependencies improves performance, ensures UI consistency, prevents compatibility errors, and streamlines security patching.
1. **Categorizing dependency complexity in micro frontend architectures** (06:14) — Grouping libraries based on global variable usage and runtime strictness reveals three levels of dependency complexity.
1. **Use cases for managing micro frontend dependency versions** (08:05) — A robust dependency solution must handle version fallbacks, deduplication, and patch updates without requiring full redeployments.
1. **Using native browser import maps for dependency resolution** (09:54) — Native browser import maps provide a built-in mechanism to lazily load separate dependency versions dynamically.
1. **Applying module federation for advanced version negotiation** (13:03) — Webpack Module Federation configures shared entries to handle automatic version negotiation and fallbacks.
1. **Choosing between import maps and module federation tooling** (17:08) — Evaluating the scale of an architecture determines whether to use native browser imports or feature-rich federation tools.

## 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")
- [Summarizing module federation patterns and architectural choices](https://www.wearedevelopers.com/videos/298-micro-frontends-with-module-federation-beyond-the-basics) (from "Micro-Frontends with Module Federation: Beyond the Basics")
- [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")
- [Resolving dependency version mismatches in micro frontends](https://www.wearedevelopers.com/videos/298-micro-frontends-with-module-federation-beyond-the-basics) (from "Micro-Frontends with Module Federation: Beyond the Basics")
- [Resolving shared dependencies and namespace collisions](https://www.wearedevelopers.com/videos/873-interface-contracts-in-microfrontend-architectures) (from "Interface Contracts in Microfrontend Architectures")

## 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)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)

## Related Jobs

- [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**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**