Module Federation：远程重部署后宿主加载动态容器致应用崩溃

核心问题定位 #

远程React应用重部署后，宿主应用首次刷新时执行await container.init(__webpack_share_scopes__.default)会触发TypeError: Cannot read property 'default' of undefined，导致整个应用空白；二次刷新后恢复正常，直到下一次远程重部署。

可能原因 #

• 共享作用域加载时序问题：远程重部署后，宿主容器初始化时，webpack的__webpack_share_scopes__.default可能还未完成注入，导致初始化失败。
• 缓存冲突：浏览器缓存了旧的远程容器文件，新部署的容器与旧缓存的共享作用域定义不匹配，引发初始化错误。
• TS编译差异：尽管配置与JS示例一致，但TS编译后的模块输出格式、共享作用域注入时机可能存在细微偏差，导致初始化时default属性未就绪。

调试思路 #

1. 排查共享作用域状态
   在容器初始化代码前添加日志，确认首次刷新时__webpack_share_scopes__的结构：

   console.log('当前共享作用域:', __webpack_share_scopes__);
   await container.init(__webpack_share_scopes__.default);
   

   如果首次刷新时__webpack_share_scopes__为空或无default属性，说明共享作用域注入滞后于容器初始化。

2. 强制禁用远程容器缓存
   给远程容器的加载URL添加版本戳，避免浏览器缓存旧文件：

   const loadRemoteContainer = async () => {
     // 可替换为远程部署的版本号，比时间戳更精准
     const cacheBust = Date.now();
     const container = await import(`your-remote-app/container?${cacheBust}`);
     return container;
   };
   

3. 添加初始化重试逻辑
   针对__webpack_share_scopes__.default未定义的情况，增加重试机制，等待共享作用域就绪：

   const initContainerWithRetry = async (container) => {
     let retryCount = 3;
     while (retryCount > 0) {
       try {
         if (__webpack_share_scopes__.default) {
           await container.init(__webpack_share_scopes__.default);
           break;
         }
       } catch (err) {
         retryCount--;
         await new Promise(resolve => setTimeout(resolve, 500));
       }
     }
   };
   

4. 检查TS编译配置兼容性
   对比JS示例的webpack输出与TS编译后的产物，确认module、target等tsconfig配置是否与webpack模块联邦兼容，避免编译后模块格式出现异常。

5. 验证共享模块版本一致性
   确认远程重部署后，其共享模块（如React）的版本与宿主ModuleFederationPlugin中shared配置的版本范围匹配，版本不兼容可能导致共享作用域初始化失败。

内容的提问来源于stack exchange，提问作者b-commits