Webpack Module Federation远程微前端依赖undefined问题

问题根源 #

单独运行微前端（MFE）时依赖正常，宿主引入后LoginService变为undefined，核心原因是Module Federation的共享依赖配置不一致，导致Webpack没有正确在宿主和MFE之间共享@ey/mfe-ui-core的实例，或者依赖导出/加载出现异常。

解决方案 #

1. 统一共享依赖的singleton配置 #

当前MFE的@ey/mfe-ui-core共享配置未设置singleton: true，但宿主设置了，这会导致Webpack可能加载两个不同的依赖实例。需要在MFE和宿主的共享配置中统一开启单例模式：

MFE的modulefederation.config.ts修改：

const { dependencies } = require('./package.json');

module.exports = {
  name: 'map_login',
  filename: 'remoteEntry.js',
  remotes: {},
  exposes: {
    './Login': './src/components/Login/Login.tsx',
  },
  shared: {
    // 优先配置核心共享依赖，避免被默认配置覆盖
    '@ey/mfe-ui-core': {
      singleton: true, // 新增单例配置，确保全应用只有一个依赖实例
      requiredVersion: dependencies['@ey/mfe-ui-core']
    },
    react: {
      singleton: true,
      requiredVersion: dependencies.react
    },
    'react-dom': {
      singleton: true,
      requiredVersion: dependencies['react-dom']
    },
    ...dependencies
  }
};

宿主的modulefederation.config.ts保持现有配置即可，但需确保@ey/mfe-ui-core的requiredVersion与MFE完全一致。

2. 确认依赖的导出与导入匹配 #

检查@ey/mfe-ui-core的导出逻辑：

• 如果库是命名导出（如export const LoginService = {...}），MFE中的导入必须对应：

  import { LoginService } from '@ey/mfe-ui-core';
  

• 如果是默认导出（如export default LoginService），导入语句应为：

  import LoginService from '@ey/mfe-ui-core';
  

编译后的代码显示_ey_mfe_ui_core__WEBPACK_IMPORTED_MODULE_1__.LoginService，说明是命名导出，需确保导入语句正确，且库本身确实导出了LoginService。

3. 确保依赖版本完全一致 #

检查宿主和MFE的package.json中@ey/mfe-ui-core的版本号，必须完全相同。版本不一致时，Webpack会判定为不同依赖，不会共享实例，可能导致MFE加载的依赖副本出现异常。

4. 清理缓存并重新构建 #

• 删除项目根目录下的node_modules/.cache文件夹（或使用webpack --clean清理构建缓存）
• 重启宿主和MFE的开发服务器
• 重新执行npm install确保依赖安装完全一致

5. 调试依赖导出 #

在MFE的SignInButton组件中添加调试代码，排查导出内容：

import * as MfeUiCore from '@ey/mfe-ui-core';

export const SignInButton = () => {
  console.log('MFE UI Core 导出内容:', MfeUiCore); // 打印所有导出项
  const handleSignIn = () => {
    MfeUiCore.LoginService?.login("loginRedirect"); // 用可选链避免崩溃
  };

  return (
    <Button className="motif-button-large btn" onClick={handleSignIn}>
        Login
    </Button>
  );
};

在宿主应用的控制台查看打印结果，确认LoginService是否存在。如果不存在，说明依赖本身的导出有问题，或者共享配置仍需调整。

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