Module Federation Core

The @module-federation/runtime package is a core component used to manage module loading and dependency sharing in a federated environment. It provides several key capabilities:

• Dependency Sharing: When used in conjunction with a build-time plugin, it can share basic dependencies based on defined policies. This reduces the total number of module downloads and improves overall loading speed.
• Granular Consumption: It allows for consuming only specific parts of a remote module's exports, preventing the need to fully download the entire remote module.
• Extensibility: The runtime calling process can be customized and extended using the module-runtime plugin mechanism.

Module Federation Chrome Devtools provides specialized debugging and observability capabilities for Module Federation applications. It enables developers to bridge the gap between remote modules hosted online and local development environments, while providing deep visibility into the module loading lifecycle.

Key capabilities include:

• Remote-to-Local Proxying: Proxy online Module Federation remote modules to a local instance.
• HMR Support: Enables Hot Module Replacement (HMR) for proxied remote modules.
• Observability: Injects a Chrome-specific observability runtime plugin via the Loading Trace tab. This allows you to receive page events through window.postMessage and export collected loading reports for analysis.

Module Federation is a system that allows independently built JavaScript applications to share code at runtime. It enables one application (the Host) to load modules from another application (the Remote) after deployment, while maintaining separate build, release, and ownership boundaries for each.

It is implemented as a layered system consisting of:

• Build plugins: Create containers and runtime metadata.
• Manifests: Describe where deployed assets, types, and metadata live.
• Runtime packages: Load remote modules and shared dependencies.
• Platform adapters: Enable the federation contract to work across various environments like Browsers, Servers (Node.js/Next.js), React Native (Metro), Rspack, and more.

When using the Module Federation integration with Rspack, you gain the following capabilities:

• Module Loading: Build modules that meet Module Federation loading specifications.
• Module Consumption: Consume modules adhering to specifications using aliases.
• Shared Dependencies: Configure shared dependencies so that if the host environment already has a dependency, it is not re-loaded.
• Automatic Type Consumption: Automatically download and consume remote types when a module has remote types.
• Hot Updates: Remote modules support hot update capabilities during consumption.

To build a robust remote module loading mechanism, you can implement error handling at three distinct layers:

1. Network Layer: Use @module-federation/retry-plugin to automatically retry failed network requests (fetch/scripts) with configurable delays.
2. Loading Layer: Use the errorLoadRemote hook in the Module Federation Runtime to intercept errors during specific lifecycles (onLoad or afterResolve) and provide fallback components or backup manifests.
3. Rendering Layer: Use React ErrorBoundary to catch component-level rendering exceptions and prevent application-wide crashes.

Module Federation 2.0 introduces several core improvements over previous versions:

• Decoupled Runtime: The runtime is a standalone SDK, making it compatible with multiple build tools (like Webpack and Rspack) and allowing cross-tool module sharing.
• Type Safety: The build plugin automatically generates and loads TypeScript types for remote modules, providing real-time type updates during local development.
• Manifest Protocol: Uses mf-manifest.json for better dependency analysis and deployment management.
• Chrome DevTools: A dedicated debugging tool to visualize module dependencies, Expose and shared configurations, and support proxying online modules to local environments.

The @module-federation/modern-js package provides Module Federation support functions specifically designed for use with the Modern.js framework. This allows you to implement micro-frontend architectures using Module Federation within a Modern.js application environment.

For detailed configuration guides and implementation steps, refer to the official Modern.js integration documentation.

The @module-federation/modern-js-v3 plugin provides Module Federation support specifically for the Modern.js framework. It enables Module Federation capabilities within Modern.js applications, allowing for micro-frontend architectures using this framework.

For detailed configuration guides and implementation details, refer to the official documentation at https://module-federation.io/guide/framework/modernjs.html.