Modern.js 模块联邦中共享 React 与运行时插件注册的冲突分析

问题背景

在 Modern.js 项目中使用模块联邦(Module Federation)功能时，开发者可能会遇到一个典型问题：当同时配置共享 React 和注册运行时插件(runtimePlugins)时，系统会抛出错误。这种情况特别容易发生在使用 registerGlobalPlugins 方法进行全局插件注册的场景中。

问题本质

这个问题的核心在于模块加载时序的冲突。具体表现为：

1. 模块加载顺序：通过配置文件注册的 Module Federation Runtime 插件会在非常早的阶段执行，这个时间点甚至早于共享模块的加载时机。

2. 依赖链问题：当插件中导入的模块依赖链上存在共享模块时（如 @module-federation/modern-js/runtime 依赖 React JSX，而 React 又被设置为共享模块），就会导致加载错误。

3. 具体表现：在示例中，react 被设置为共享模块(singleton: true)，同时配置了运行时插件，插件中又通过 registerGlobalPlugins 方法导入了依赖 React 的模块，这就形成了循环依赖。

技术原理深度解析

模块联邦的初始化流程

1. 容器初始化阶段：Module Federation 容器首先初始化，此时共享模块尚未加载
2. 插件执行阶段：运行时插件开始执行注册逻辑
3. 共享模块加载阶段：共享的 React 等库开始加载

为什么直接修改全局变量有效

示例中提到的 window.__FEDERATION__.__GLOBAL_PLUGIN__.push() 方式之所以有效，是因为：

• 它绕过了模块导入系统
• 直接操作全局存储的插件数组
• 避免了在插件注册时触发模块加载

解决方案

官方推荐方案

1. 调整注册时机：将全局插件的注册逻辑移到 src/layout.tsx 中，确保在共享模块加载完成后执行
2. 使用新版SDK：升级到 @module-federation/modern-js@0.13.1 或更高版本，该版本已修复相关问题

替代方案

1. 直接操作全局变量：如示例中的 window.__FEDERATION__ 方式
2. 使用增强版运行时：从 @module-federation/enhanced/runtime 导入方法

最佳实践建议

1. 插件设计原则：运行时插件应尽量减少对共享模块的依赖
2. 注册时机选择：对于必须依赖共享模块的插件，应确保在应用初始化完成后注册
3. 版本管理：保持 Module Federation 相关依赖为最新版本
4. 错误处理：在插件代码中加入对共享模块可用性的检查

总结

Modern.js 的模块联邦功能提供了强大的微前端能力，但在共享模块与运行时插件的配合上需要注意加载时序问题。理解模块加载的生命周期和依赖关系，选择合适的注册时机和方法，可以避免这类问题的发生。随着 Module Federation 生态的不断完善，这类边界情况会得到更好的处理，开发者也需要持续关注官方更新和最佳实践。