Webpack Module Federation React微前端报错：Shared module is not available for eager consumption 寻求解决方法

阿华AIGC实验室

2026-4-7

我之前在做Module Federation微前端的时候踩过一模一样的坑！这个错误的核心原因其实很直白：你的容器应用入口文件直接同步依赖了React这类共享模块，但Module Federation的共享模块是异步加载的，在入口代码执行时，React还没完成加载，所以就抛出了"无法用于即时消费"的错误。

给你几个亲测有效的解决方案，按优先级推荐：

方案一：拆分入口文件（最推荐，无副作用）

把容器应用的入口逻辑拆成两个文件，让共享模块加载完成后再执行React相关代码：

改造容器应用的src/index.js，改成只负责触发异步加载：

// src/index.js
// 不直接写React渲染逻辑，仅触发异步加载
import('./bootstrap');

新建src/bootstrap.js，把原来入口文件里的React渲染逻辑移到这里：

// src/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>
);

这样修改后，入口文件会先等待Module Federation的共享模块（React、ReactDOM）准备完毕，再执行bootstrap里的渲染逻辑，从根源上解决了异步共享模块和同步入口的冲突。

方案二：调整共享模块配置（仅临时调试用）

如果暂时不想拆分入口，可以在webpack配置的shared选项里给React和ReactDOM加上eager: true，强制Webpack把共享模块打包到主bundle中：

// 容器及所有远程应用的webpack.config.js的shared配置
shared: {
  react: { 
    singleton: true, 
    strictVersion: true, 
    requiredVersion: "18.2.0",
    eager: true // 新增配置
  },
  "react-dom": { 
    singleton: true, 
    strictVersion: true, 
    requiredVersion: "18.2.0",
    eager: true // 新增配置
  },
},

⚠️ 注意：这个方案的副作用是会让每个应用都打包一份React，完全失去了Module Federation共享模块的优势，只适合临时调试，绝对不推荐生产环境使用。

额外必查项

除了上面的修改，还要确保这几点：

所有微前端应用（容器+两个远程应用）的package.json里，react和react-dom的版本必须完全是18.2.0，和webpack配置里的requiredVersion严格匹配
启动容器前，先确认mfe-portfolio（3001端口）和mfe-dashboard（3003端口）的devServer已经正常启动，能访问到它们的remoteEntry.js
如果浏览器控制台出现跨域错误，需要在远程应用的devServer里添加配置：headers: { "Access-Control-Allow-Origin": "*" }

内容来源于stack exchange