单页加载多个React微前端渲染与事件异常如何解决

你的判断完全正确：同页面加载多个独立构建的React微前端时，两个问题共同导致了故障：

• 每个微前端的独立bundle都内置了完整的React、ReactDOM实例，同页面多份React实例共存会直接导致Hook调用上下文错乱，抛出Invalid hook call错误
• 每个应用单独引入的runtime.js是Webpack的运行时脚本，多份运行时同时加载会互相覆盖全局模块缓存、chunk加载逻辑，直接导致已渲染应用的事件绑定失效、后续应用无法渲染，这也是生产环境无报错但功能异常的核心原因

方案1：Nx原生Module Federation共享依赖（最推荐） #

Nx对Webpack Module Federation有开箱即用的支持，不需要手动拆分包，配置后会自动在所有微前端间共享单例公共依赖，从根源解决多实例问题：

• 给每个微前端的模块联邦配置文件添加单例依赖规则，强制React、ReactDOM全页面共用同一份实例：

const { withModuleFederation } = require('@nx/react/module-federation');

module.exports = withModuleFederation({
  name: 'app1', // 每个微前端配置唯一名称，比如app1、app2
  exposes: {
    './Entry': './src/main.tsx', // 替换为各应用的实际入口路径
  },
  shared: (depName, config) => {
    if (['react', 'react-dom', 'react-dom/client'].includes(depName)) {
      return {
        ...config,
        singleton: true,
        strictVersion: true,
        eager: true
      }
    }
    return config
  }
});

• 调整页面资源引入逻辑：整站只引入一次runtime.js和polyfills文件，不要每个微前端都加载自己的runtime和polyfills，模块联邦会自动处理各应用的依赖加载顺序，不会重复拉取公共资源。

方案2：手动提取公共依赖为全局单例（匹配你最初的实现思路） #

如果不想接入模块联邦，也可以手动把公共依赖拆成独立全局包，构建时排除各微前端的公共依赖：

• 新建全局公共依赖入口，统一导出所有需要共享的库并挂载到window：

// 工作区新建shared/public-deps.js
import * as React from 'react';
import * as ReactDOMClient from 'react-dom/client';
import * as ReactDOM from 'react-dom';
// 其他需要全局共享的库（如react-router、工具函数库）可在此处追加

window.React = React;
window.ReactDOMClient = ReactDOMClient;
window.ReactDOM = ReactDOM;

• 配置所有微前端的Webpack构建规则，将公共依赖标记为外部依赖，不打包进各应用的产物：

// 对应微前端的webpack.config.js
module.exports = {
  // 保留原有其他配置
  externals: {
    react: 'React',
    'react-dom/client': 'ReactDOMClient',
    'react-dom': 'ReactDOM'
  }
};

• 调整页面资源引入顺序，优先加载全局公共依赖、全局runtime和polyfills，再加载各微前端的业务代码：

...
<!-- 全局公共依赖，只加载一次 -->
<script src="/dist/shared/public-deps.js" type="text/javascript"></script>
<script src="/dist/runtime.js" type="text/javascript"></script>
<script src="/dist/polyfills.esm.js" type="text/javascript"></script>

<div id="app1"></div>
<script src="/dist/apps/app1/main.esm.js" type="text/javascript"></script>

...

<div id="app2"></div>
<script src="/dist/apps/app2/main.esm.js" type="text/javascript"></script>
...

• 问题快速验证：在每个微前端入口最顶部打印React实例引用，如果两个应用打印的React对象地址不同，即可确认是多实例问题：

import React from 'react';
console.log('当前应用React实例:', React, '版本:', React.version);

• 所有微前端使用的React、ReactDOM版本必须保持一致，Nx Monorepo默认会统一根目录依赖版本，基本不会出现版本冲突
• 除React外，所有依赖React上下文的库（如react-router、状态管理库）都需要配置为单例共享，否则会出现上下文丢失、功能失效问题
• 构建后可以检查各微前端main.esm.js的体积，排除React等公共依赖后，单应用产物体积会明显下降，如果体积没有变化需要检查externals或模块联邦配置是否生效

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