[Feature Request] 加载微端的时候，增加是否激活的配置，避免使用原生tab实现多标签路由，无法显示微端的问题。

[X-neuron]

Background

在原生antd 的tab场景下，打开微前端时，第一个tab加载微端正常显示，第二tab发现处于挂起状态。无法显示。 原生tab 切换标签时候，可以手动navigate将路由导航过去，所以可以避免存在冲突的问题。

Proposal

建议，加载微端的时候，增加是否激活的配置。解决原生的tab 实现多标签 时，加载微端 第一个tab加载微端正常显示，其后的tab处于挂起状态无法显示的问题。

[X-neuron]

加载第二个tab的。 qiankun微端状态：

bootstrapPromise: Promise { <state>: "pending" }
​
getStatus: function getStatus()​
loadPromise: Promise { <state>: "pending" }
​
mount: function mount()​
mountPromise: Promise { <state>: "pending" }
​
unmount: function unmount()​
unmountPromise: Promise { <state>: "pending" }

[kuitos]

配置 singular: false

[X-neuron]

useMount(() => {
    microApp.current = loadMicroApp({
      name: `app${id}`,
      entry,
      container: `#${id}`,
      singular: false,
    }, {
      sandbox: { strictStyleIsolation: true },
      singular: false
    });
    console.log(id, microApp.current);
  });

  useUnmount(() => {
    microApp.current ? microApp.current.unmount() : 0;
  })

文档里默认的singular 默认为false, 加完这个配置后，两个都同时挂起。一个也显示不了。 提示错误：

TypeError: property descriptors must not specify a value or be writable when a getter or setter has been specified 3 proxySandbox.js:45
xtuysxkknh 
Object { mount: mount(), unmount: unmount(), getStatus: getStatus(), loadPromise: Promise { "pending" }, bootstrapPromise: Promise { "pending" }, mountPromise: Promise { "pending" }, unmountPromise: Promise { "pending" } }

[X-neuron]

配置 singular: false

该配置 没法解决这个问题。还导致都挂起的问题

[kuitos]

提供可复现仓库

[X-neuron]

加载微端相关的代码就上面几行。项目未完善，暂未开源。

import { loadMicroApp } from 'qiankun';
import { useMount, useUnmount } from '@umijs/hooks';

//以下为相关代码
 const microApp = useRef(null);
  useMount(() => {
    microApp.current = loadMicroApp({
      name: `app${id}`,
      entry,
      container: `#${id}`,
      // singular: false,  该方式直接报错
    }，
   // 加了以下配置，两个都 在挂起状态 ，看不到页面
   {
      sandbox: { strictStyleIsolation: true },
      singular: false
    });
    console.log('div id is:', id, '    micro app is:', microApp.current);
  });

  useUnmount(() => {
    console.log('will close the micro app:', microApp.current);
    microApp.current ? microApp.current.unmount() : 0;
  })

关闭tabpane 页面直接白了。(确认关闭其他没微端tab没逻辑问题)

[X-neuron]

纯原生组件，原生webpack，纯hook 未使用umi

[X-neuron]

> div id is: ocvkkyaalo     micro app is: 
> Object { mount: mount(), unmount: unmount(), getStatus: getStatus()
> , loadPromise: Promise { "fulfilled" }, bootstrapPromise: Promise { "fulfilled" }, mountPromise: Promise { "fulfilled" }, unmountPromise: Promise { "pending" } }
> index.jsx:32:12
> 该页面使用非标准属性“zoom”。请考虑在相关属性值中使用 calc()，或将“transform”与“transform-origin: 0 0”一同使用。 loader.js:148
> [react16] react app bootstraped main.55aa10a8d5916e316427.js line 100102 > eval:1:2831
> [react16] props from main framework 
> Object { domElement: div, name: "appocvkkyaalo_0", mountParcel: F(), singleSpa: {…}, unmountSelf: unmountThisParcel(), container: div#__qiankun_microapp_wrapper_for_appocvkkyaalo_0__, setGlobalState: setGlobalState(state), onGlobalStateChange: onGlobalStateChange(callback, fireImmediately)
>  }
> main.55aa10a8d5916e316427.js line 100102 > eval:1:3112
> [onGlobalStateChange - appocvkkyaalo_0]: 
> Object {  }
>  
> Object {  }
> main.55aa10a8d5916e316427.js line 100102 > eval:1:2543
> [qiankun] 'ignore' not declared when init state！ globalState.js:97
> [qiankun] 'user' not declared when init state！ globalState.js:97
> [qiankun] state has not changed！ globalState.js:102
> [qiankun] prefetch starting after  mounted... 
> Array []
> prefetch.js:72
> div id is: qauqbrqyyg     micro app is: 
> Object { mount: mount(), unmount: unmount(), getStatus: getStatus()
> , loadPromise: Promise { "pending" }, bootstrapPromise: Promise { "pending" }, mountPromise: Promise { "pending" }, unmountPromise: Promise { "pending" } }
> index.jsx:32:12
> will close the micro app: 
> Object { mount: mount(), unmount: unmount(), getStatus: getStatus()
> , loadPromise: Promise { "fulfilled" }, bootstrapPromise: Promise { "fulfilled" }, mountPromise: Promise { "fulfilled" }, unmountPromise: Promise { "pending" } }
> index.jsx:36:12
> will close the micro app: 
> Object { mount: mount(), unmount: unmount(), getStatus: getStatus()
> , loadPromise: Promise { "pending" }, bootstrapPromise: Promise { "pending" }, mountPromise: Promise { "pending" }, unmountPromise: Promise { "pending" } }
> index.jsx:36:12
> [qiankun:sandbox] appocvkkyaalo modified global properties restore... 
> Array(5) [ "__INJECTED_PUBLIC_PATH_BY_QIANKUN__", "webpackJsonp_react16", "react16-main", "webpackJsonp_react16", "__INJECTED_PUBLIC_PATH_BY_QIANKUN__" ]
> sandbox.js:130
> Error: single-spa minified message #6: See https://single-spa.js.org/error/?code=6&arg=&arg=LOADING_SOURCE_CODE single-spa.min.js:2:5130
> Error: [qiankun] Target container with #qauqbrqyyg not existed while appqauqbrqyyg loading!

[X-neuron]

{ sandbox: { strictStyleIsolation: true }, singular: false } 猛的又测了一晚，加上这个配置后，在谷歌浏览器中正常 火狐浏览器，两页面均无法打开。

两两浏览器均正常。 看来是 浏览器兼容的问题。