使用ModuleFederationPlugin加载宿主应用时出现TypeError读取call属性失败

错误原因及对应解决方案 #

1. 未共享React/ReactDOM核心依赖 #

Module Federation中，远程应用和容器应用若各自打包React，会导致版本冲突，触发该call类型错误。需在两者的Webpack配置中添加共享依赖配置：

app1的Webpack配置修改：

new ModuleFederationPlugin({
    name: 'app1',
    filename: 'remoteEntry.js',
    exposes: {
        './ReceiptApp': './src/bootstrap.js'
    },
    shared: {
        react: { singleton: true, eager: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }
    }
})

容器应用的Webpack配置修改：

new ModuleFederationPlugin({
  name: 'container',
  remotes: {
    receipt: 'app1@http://localhost:3001/remoteEntry.js',
  },
  shared: {
      react: { singleton: true, eager: true, requiredVersion: '^18.0.0' },
      'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }
  }
})

• singleton: true：确保全局只有一个React实例
• eager: true：让共享依赖在应用启动时就加载，避免异步加载导致的引用错误
• requiredVersion：指定兼容的版本号，可根据实际项目版本调整

2. 检查远程应用的导出方式 #

确认app1的bootstrap.js是命名导出mount函数，示例代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 命名导出mount，对应容器应用的解构导入
export const mount = (element) => {
  const root = ReactDOM.createRoot(element);
  root.render(<App />);
};

若使用默认导出，容器应用需改为import mount from 'receipt/ReceiptApp'。

3. 调整容器应用的入口加载方式 #

容器应用的index.js需异步加载bootstrap，避免远程模块未加载完成时就执行代码：

// index.js 内容
import('./bootstrap');

不要使用同步导入import './bootstrap'，否则会提前触发远程模块的引用逻辑。

4. 验证远程入口的可用性 #

确认app1运行在http://localhost:3001，且remoteEntry.js能正常访问：

• 打开浏览器控制台的Network标签，查看remoteEntry.js的请求状态为200
• 检查该文件的内容是否完整，无加载异常

内容的提问来源于stack exchange，提问作者kheme