如何解决TypeScript React项目Module Federation共享模块无法急切消费错误

架构老林

2026-9-25

错误根因

这个报错是模块联邦共享依赖的加载逻辑冲突导致的：子应用app1将react、react-dom、react-redux都标记为eager: true（启动时立即加载），但宿主应用只配置了react为立即加载，且bootstrap启动方案配置不正确的情况下，加载app1组件时会找不到已初始化的共享依赖。

解决步骤

修正bootstrap启动配置
很多人使用bootstrap方案时会犯同步引入的错误，必须在index.tsx中用异步动态导入的方式加载bootstrap：
```
// index.tsx 正确写法，不要用同步import './bootstrap'
import('./bootstrap')
```

统一两边共享依赖的eager配置
宿主应用的webpack.config.js中，shared配置需要和app1对齐，补充react-dom、react-redux的eager配置：

new ModuleFederationPlugin({
    name: "host",
    remotes: {
        app1: "app1@http://localhost:3002/remoteEntry.js",
    },
    shared: [
        {
            ...deps,
            react: {
                eager: true,
                requiredVersion: deps.react,
            },
            "react-dom": {
                eager: true,
                requiredVersion: deps["react-dom"],
            },
            "react-redux": {
                eager: true,
                requiredVersion: deps["react-redux"],
            },
        },
    ]
}),

可选替代方案：关闭eager配置
如果不需要启动时立即加载共享依赖，可以把两边所有共享依赖的eager属性都改为false，完全走模块联邦的异步共享依赖加载逻辑，配合异步导入的bootstrap方案也能解决问题。
对齐依赖版本
检查两边应用的react、react-dom、react-redux版本，保证requiredVersion对应的版本号匹配，避免webpack加载多份依赖触发冲突。