如何将WebPack Module Federation暴露的React微前端组件加载到JSF XHTML页面？

问题根源 #

Module Federation依赖Webpack初始化的共享作用域（__webpack_share_scopes__）管理跨应用依赖共享，纯JSF页面默认无此环境，直接加载远程组件会触发该变量未定义的错误。

解决方案步骤 #

1. 确认远程应用（ui-registry-react）的Module Federation配置 #

确保webpack.config.js中正确配置共享依赖，将React和ReactDOM设为单例模式，避免重复加载：

// ui-registry-react/webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'uiRegistry',
      filename: 'remoteEntry.js',
      exposes: {
        './Header': './src/components/Header',
        './Footer': './src/components/Footer'
      },
      shared: {
        react: {
          singleton: true,
          requiredVersion: '^18.2.0' // 匹配你的React实际版本
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '^18.2.0'
        }
      }
    })
  ]
};

2. 在JSF XHTML页面中按顺序加载资源 #

在页面的<h:head>或<h:body>区域，按依赖顺序引入必要资源：

<!-- 先加载React和ReactDOM的UMD生产包 -->
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>

<!-- 加载自定义微前端加载脚本 -->
<script src="/path/to/microfrontend-loader.js"></script>

<!-- 组件渲染占位容器 -->
<div id="microfrontend-header"></div>

3. 编写正确的microfrontend-loader.js脚本 #

该脚本需先初始化Webpack共享作用域，再加载远程入口并渲染组件：

// microfrontend-loader.js
(async function() {
  // 初始化共享作用域，避免未定义错误
  if (!window.__webpack_share_scopes__) {
    window.__webpack_share_scopes__ = { default: {} };
  }

  // 动态加载远程应用的remoteEntry.js
  await loadScript('http://你的远程应用域名/remoteEntry.js');

  // 初始化共享作用域并连接远程容器
  await __webpack_init_sharing__('default');
  const container = window.uiRegistry; // 对应远程应用name配置的uiRegistry
  await container.init(window.__webpack_share_scopes__.default);

  // 获取暴露的Header组件
  const HeaderModule = await container.get('./Header');
  const Header = HeaderModule.default; // React组件默认导出

  // 渲染组件到指定容器
  const root = ReactDOM.createRoot(document.getElementById('microfrontend-header'));
  root.render(React.createElement(Header));
})();

// 辅助函数：动态加载外部脚本
function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

4. 关键注意事项 #

• 确保远程应用的remoteEntry.js可被JSF页面所在域名访问，可在远程应用Webpack的devServer配置中添加跨域头部：headers: { 'Access-Control-Allow-Origin': '*' }
• 保持React和ReactDOM的版本在远程应用与JSF页面中完全一致，避免版本冲突
• 若JSF页面已引入React依赖，可跳过UMD包加载，但需确保版本匹配且符合单例要求

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