问题 Wrapper element for XXX is not existed! 必现, sandbox.loose 设为 true 的办法并不完美，请问有无完美的办法？

[FedLife]

问题 Wrapper element for XXX is not existed! 必现。issues有人问过，但没找到完美解决办法。简要说明如下：

1. 我有两个微应用 A 和 B，都是基于webpack构建的；
2. 由于历史问题，微应用A较重，index.html约有81kb；
3. 通过 registerMicroApps 注册到了qiankun，并启动，核心代码如下：

registerMicroApps(
    apps.map(app => ({
      ...app,
      entry: urlFix(app.entry),
      container: "#__subapp-viewport__",
      loader,
      props: options.transferedProps
    })),
    {
      beforeLoad: options.beforeLoad || [
        app => {
          console.log(app.name)
        },
      ],
      beforeMount: options.beforeMount || [
        app => {
          console.log(app.name)
        },
      ]
    },
  );
start({
  // sandbox: {
  //   loose: true,
  // },
 });

4. 进入微应用A时，不等页面渲染完，点击微应用B的入口，就报错了，在控制台可以观察到：
   - 应用生命周期函数 beforeMount 和 beforeLoad打印的应用不一致（beforeLoad打印的是B，beforeMount打印的是A）；
   - Wrapper element for XXX is not existed!的报错信息；

5. sandbox.loose 设为 true 不完美的地方在于：虽没有报错，但渲染的应用是之前没出来的A，不是切换后的B

期望：在较重的微应用A没有出来时切到微应用B后，能够正常渲染微应用B。

• qiankun Version: 2.10.10
• Platform Version: macOS14.0 Beta
• Browser Version: chrome 114.0.5735.198

[github-actions]

Hello @FedLife. In order to facilitate location and troubleshooting, we need you to provide a realistic example. Please forking these link codesandbox or clone qiankun examples to your GitHub repository.

你好 @FedLife, 为了方便定位和排查问题，我们需要你提供一个重现实例，请提供一个尽可能精简的链接 codesandbox 或直接 clone qiankun examples，并上传到你的 GitHub 仓库。

[FedLife]

Hello @FedLife. In order to facilitate location and troubleshooting, we need you to provide a realistic example. Please forking these link codesandbox or clone qiankun examples to your GitHub repository.

你好 @FedLife, 为了方便定位和排查问题，我们需要你提供一个重现实例，请提供一个尽可能精简的链接 codesandbox 或直接 clone qiankun examples，并上传到你的 GitHub 仓库。

重现问题的仓库（qiankun examples的修改）：https://github.com/FedLife/qiankun-examples/tree/main

[kuitos]

singular 配置为 true https://qiankun.umijs.org/zh/api#startopts

[FedLife]

1. 文档的介绍里，singular 默认就是 true
2. 我还是在重现的 demo 里显式地加上了这个配置，问题和之前一样
   

[kuitos]

看日志打印顺序都是对的，那就是应用本身的问题，比如 unmount 后代码还在跑

[kuitos]

[FedLife]

日志开始是对的 后面貌似窜了

最后一次点击是 react16, 期望的是渲染 react16, 生命周期到 "?" 上面 的mount react16 就应该结束了

[kuitos]

URL又跳到了heavyA啊，react16就自动卸载了

[FedLife]

url变化：初始为 react16 -> 点击 heavyA -> 点击 react16

应该是要中止 heavyA, 渲染 react16，结果却自动跳到了 heavyA

[kuitos]

对，问题就是为什么自动跳到了 heavyA。目测是 heavyA 的路由在前一次 unmount 时没有被卸载

[xilongwang1]

@FedLife 解决了吗? 我也遇到了, 一个月了还没解决

[FedLife]

@FedLife 解决了吗? 我也遇到了, 一个月了还没解决

没有，只是简单处理了下，在报错的时候让页面重载一次，保证有东西出来

[github-actions]

Since the issue was labeled with out-of-scope, but no response in 30 days. This issue will be close. If you have any questions, you can comment and reply.
由于该 issue 被标记为与本项目无关，却 30 天未收到回应。现关闭 issue，若有任何问题，可评论回复。

[JunmingZ]

我直接用loadMicroApp取代registerMicroApps，直接手动控制卸载注册，暂时脱离了这个Wrapper element for XXX is not existed! 的问题， 等qiankun3.0吧。

[jiaoxuyang1013]

真的好坑，自动注册就报错了， 改成手动控制就没问题

[mutour123]

真的好坑，这个问题我也遇到了，解决不了。手动控制都没有用

[jasonHzq]

真的好坑，自动注册就报错了， 改成手动控制就没问题

黑盒加魔法太多了。。

[ChengCuotuo]

如果是 react18，unmountComponentAtNode 已经被标记为 Deprecated，取消挂载会报这个错误，改成 unmount
https://react.dev/reference/react-dom/client/createRoot#root-unmount
可以解决这个问题