Module Federation报错：Cannot read properties of undefined reading call 如何解决？

问题背景 #

我创建了一个样板项目，其中mf1通过Module Federation暴露useNav模块，mf2负责消费该模块，但运行后控制台抛出以下错误：

bootstrap:24 Uncaught TypeError: Cannot read properties of undefined (reading 'call')
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/bootstrap.tsx (index.js:176:1)
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/index.tsx (bootstrap.tsx:7:10)
at webpack_require (bootstrap:24:1)
at startup:6:1
at startup:6:1

mf1相关代码与配置 #

useNav模块代码：

export const useNav = () => {
  const someFun = () => {
    console.log('some Fun from mf1');
  };

  return { someFun };
};

webpack配置片段：

new MF({
  // 当前项目标识
  name: 'mf1',
  filename: 'remoteEntry.js',
  exposes: {
    './useNav': './src/useNav/useNav.ts'
  },
  remotes: {}
})

mf2相关代码与配置 #

webpack配置片段：

new MF({
  name: 'mf2',
  // 远程模块地址
  remotes: {
    mf1: 'mf1@http://localhost:3001/remoteEntry.js'
  }
})

消费代码片段：

// @ts-ignore
import { useNav } from 'mf1/useNav';

import { render } from 'react-dom';

const App = () => {
  const { someFun } = useNav();
  someFun(); // 触发报错
  return <div>Hello App</div>;
};

解决方案 #

1. 确认远程服务正常运行 #

确保mf1项目已在http://localhost:3001启动，直接访问该地址下的remoteEntry.js能看到正常的JS代码，若无法访问则检查mf1的端口配置、启动状态。

2. 添加共享依赖配置 #

Module Federation需要确保跨项目的核心依赖（如React、ReactDOM）保持单例且版本一致，否则会因依赖冲突导致模块加载失败。在mf1和mf2的webpack配置中都添加shared字段：

new MF({
  // ...原有配置
  shared: {
    react: { singleton: true, requiredVersion: '^18.0.0' }, // 替换为你的React实际版本
    'react-dom': { singleton: true, requiredVersion: '^18.0.0' }
  }
})

3. 改用异步加载远程模块 #

同步导入远程模块可能在remoteEntry.js未加载完成时执行，导致模块未定义。修改mf2的消费代码为动态导入：

import { render, useState, useEffect } from 'react-dom';

const App = () => {
  const [navUtils, setNavUtils] = useState(null);

  useEffect(() => {
    // 动态加载远程模块，确保入口文件加载完成
    import('mf1/useNav').then(({ useNav }) => {
      setNavUtils(useNav());
    });
  }, []);

  useEffect(() => {
    if (navUtils) {
      navUtils.someFun();
    }
  }, [navUtils]);

  return <div>Hello App</div>;
};

4. 检查模块导出路径一致性 #

确认mf1的exposes配置路径与mf2的导入路径完全匹配：

• mf1配置：'./useNav': './src/useNav/useNav.ts'
• mf2导入：import { useNav } from 'mf1/useNav'
  同时检查mf1的useNav.ts文件路径是否正确，导出语法无错误。

5. 清除webpack缓存 #

缓存可能残留旧的构建文件，导致远程模块加载异常。执行以下操作：

• 删除两个项目的node_modules/.cache目录
• 重启mf1和mf2项目，重新构建

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