[微前端 qiankun] 加载报错：Target container with #child-container not existed while devi

[微前端 qiankun] 加载报错：index-CnETAGE2.js:8 Uncaught n: application 'childApp1' died in status LOADING_SOURCE_CODE: [qiankun]: Target container with #child-container not existed while deviceMgmt loading!

问题解释

该问题大概意思是：加载子应用childApp1时，目标容器child-container不存在！ 该问题出现在，qiankun微前端项目中，进入系统页面刷新控制台报错，页面不显示。

解决方法

修改 qiankun 加载时机，当 router 初始化完成后再加载 qiankun，所以可以通过 router.isisReady()确认 router 初始话完成后再加载 qiankun

js 复制代码

// microApp > index.ts
import {
  addGlobalUncaughtErrorHandler,
  registerMicroApps,
  start,
  type LoadableApp,
  type ObjectType,
} from "qiankun";
import { appConfig } from "./appConfig";

function setupQiankun() {
  registerMicroApps(appConfig, {
    beforeLoad: async (app: LoadableApp<ObjectType>) => {
      console.log("%c 乾坤beforeLoad", "color: red;font-size: 16px;");
    },
    beforeMount: async (app) => {
      console.log("%c 乾坤beforeMount", "color: red;font-size: 16px;");
      console.log("app", app);
    },
    afterMount: async (app) => {
      console.log("%c 乾坤 afterMount", "color: red;font-size: 16px;");
      console.log("app", app);
    },
    afterUnmount: async (app) => {
      console.log("%c 乾坤 afterUnmount", "color: red;font-size: 16px;");
      console.log("app", app);

      if (app.props && app.props.stopWatch) {
        app.props.stopWatch();
      }
    },
  });

  addGlobalUncaughtErrorHandler((event: any) => {
    console.log(
      "%c 乾坤 addGlobalUncaughtErrorHandler",
      "color: red;font-size: 16px;"
    );
    console.log(event);
    const { message: msg } = event;
    if (msg && msg.includes("died in status LOADING_SOURCE_CODE")) {
      console.error("微应用加载失败，请检查应用是否可运行");
      console.log(
        "%c  靓仔 微应用加载失败，请检查应用是否可运行",
        "font-size: 30px ;color: red"
      );
      console.log(msg);
      console.log(event);
    }
  });

  start();
}

export function initQiankun(router) {
  router
    .isReady()
    .then(() => {
      setupQiankun();
    })
    .catch((err) => {
      console.log("%c router err", "font-size: 30px ;color: red");
      console.log(err);
    });
}

问题分析

问题出现

使用qiankun开发完后，部署到测试环境，登入进入系统没有问题，但是页面一刷新就会出现， 并且是偶发的。有点时候刷新没问题，有点时候刷新报错。更奇怪的是偶发只在我的主机出现，其他人的必现在。

可能的原因

1.页面刷新时，主应用在挂载子应用时，容器元素尚未被正确渲染到 DOM 中
2.主应用和子应用的加载时机存在竞争条件
3.容器元素可能是在路由组件中动态渲染的，但微应用加载逻辑没有等待路由渲染完成

当前项目的这个问题

出现这个错误的原因是，qiankun 加载子应用的时机早于主应用的 router 跳转时机，主应用的 router 还未完成跳转，未完成初始化，这个时候就去加载子应用，子应用无法获取到有效的 child-container dom 元素，就出现的该错误。因此只要在 router 完成初始化后调用 qiankun 即可解决该问题