التبعيات المشتركة وإدارة الإصدارات

In a Module Federation setup every remote can bundle its own copy of react, react-dom, or a design system. Without coordination, a single page may load three copies of React.

Shared dependencies let independently deployed apps agree on a single instance of a library at runtime, cutting payload and avoiding state bugs.

Both host and remotes declare a shared block in their ModuleFederationPlugin config. Webpack then negotiates which version actually loads.

singleton: true forces one and only one copy across the whole app. This is essential for libraries that hold internal state, like React (hooks) or a router.

Without it, two React instances cause the dreaded Invalid hook call error.

Each shared module declares a requiredVersion. At load time Module Federation picks the highest compatible version among all that are offered.

When a remote needs a version incompatible with the loaded singleton, Module Federation logs a warning and uses the existing one. With strictVersion: true it instead throws, surfacing the mismatch early.

By default shared modules load asynchronously, which requires a bootstrap entry. Setting eager: true bundles the dependency into the initial chunk so no async boundary is needed.

Use eager only for the host shell; eager everywhere defeats the purpose of sharing.

Because shared modules resolve asynchronously, the standard pattern splits the entry into index.js (just an import) and bootstrap.js (the real app). This defers execution until the share scope is ready.

A shared component library should usually be a singleton too, so theming context and CSS-in-JS instances are not duplicated.

Instead of listing versions by hand, you can pass an array and let the plugin read versions from package.json. Tools like the Module Federation Enhanced plugin can even auto-share all dependencies.

To confirm sharing works, inspect the Network tab: you should see one vendor chunk for the shared lib. Bundle analyzers and the runtime share scope (__webpack_share_scopes__.default) help debug.

• Singleton for stateful libs (React, router, stores).
• Set requiredVersion to align teams.
• Keep eager only on the host shell.
• Audit bundles regularly for accidental duplicates.

Which option ensures only one instance of React loads across all micro frontends?

You learned how Module Federation shares dependencies: singletons for stateful libs, version negotiation via requiredVersion/strictVersion, eager vs lazy loading, and the bootstrap pattern. Proper sharing slashes bundle size and prevents subtle runtime bugs.