使用共享库时微前端组件引发页面无法加载的问题

可能原因及修复步骤 #

1. 版本一致性问题 #

你配置了requiredVersion: deps.react，需确保Host和Remote项目的package.json中React、ReactDOM的版本完全一致（包括主版本、次版本、补丁号）。Webpack的ModuleFederation会严格校验版本，若版本不匹配，会拒绝共享模块，导致组件加载失败且无明显报错。

• 临时测试：移除requiredVersion配置，看组件是否能正常渲染。若恢复正常，说明版本不一致，统一两边版本后再加回requiredVersion。

2. Eager配置与异步加载冲突 #

eager: true会将共享模块直接打包到主bundle中，可能打乱React.lazy异步加载的顺序，导致Remote组件加载时依赖的共享模块未就绪。

• 尝试将eager改为false，让共享模块按需加载；
• 确保消费组件用<Suspense>包裹懒加载组件，提供加载状态：

  import React, { Suspense } from 'react';
  const MFETest = React.lazy(() => import('MFETest/MFETest'));
  
  function App() {
    return (
      <div>
        <Suspense fallback={<div>加载中...</div>}>
          <MFETest />
        </Suspense>
      </div>
    );
  }
  export default App;
  

3. 入口文件结构错误 #

ModuleFederation要求项目入口不能直接执行渲染逻辑，需将渲染代码拆分到单独文件中，避免共享模块加载顺序冲突。

• 修改Host和Remote的入口文件（如index.js）：

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

• 创建bootstrap.js存放渲染逻辑：

  // bootstrap.js
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  

4. Singleton模式的兼容性问题 #

singleton: true强制全局只有一个共享模块实例，但如果Host和Remote的共享模块存在细微差异（比如版本小补丁不同），会导致模块加载失败。

• 临时关闭singleton配置，测试组件是否能渲染。若恢复正常，再排查版本差异或调整singleton的strictVersion为false（允许兼容版本）：

  shared: {
    react: {
      singleton: true,
      requiredVersion: deps.react,
      strictVersion: false, // 允许兼容版本
      eager: false
    }
  }
  

5. 网络请求排查 #

打开浏览器开发者工具的Network面板，检查：

• remoteEntry.js是否成功加载；
• Remote暴露的组件chunk是否有请求，且返回200状态码。
  若chunk未请求，说明共享模块解析失败，需检查Webpack配置中exposes路径是否正确。

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