Vite子应用多层嵌套，无法加载，报错Uncaught TypeError: Illegal constructor

[alexwjj]

问题描述

问题的具体描述 AppA，AppB，AppC，三个应用都是vite模式，都使用iframe沙箱，AppA 去加载 AppB，AppB中又去加载AppC，第三级无法加载，报错Uncaught TypeError: Illegal constructor

复现步骤

1. 使用三个vite 创建的仓库按照AppA +（AppB + AppC）方式进行嵌套，必现 2.经过验证，官方dev中子应用嵌套正常：AppA +（AppB + AppC），AppB必须是webpack才行

上传截图

复现仓库

https://github.com/alexwjj/microAppTest 三个项目启动后访问 9001端口，控制台有对应报错

环境信息

• micro-app版本："@micro-zoe/micro-app": "beta",
• 主应用前端框架&版本：react + vite，beta
• 子应用前端框架&版本：react + vite，beta
• 构建工具&版本：vite：4.x

[alexwjj]

怎么没人看一下呢，是我这问题太低级了？还是已知bug？

[tjyuanpeng]

统一让appA去初始化，貌似可以

appB内：

• 删除microApp.start

// microApp.start({
//   iframe: true,
//   // tagName: 'micro-app-sub',
// });

• appC的htm tag改成micro-app-sub，和appA内的配置统一

{/* <micro-app name='appC' url='http://localhost:9003/'></micro-app> */}
<micro-app-sub name='appC' url='http://localhost:9003/'></micro-app-sub>

官方文档好像支持你这种方式，但是好像确实是报错的 如果是跟vite不兼容，可以试试打包build之后是否还有问题 那就可以证明vite的方式可能对这种多个micro-app的方式不兼容

[LAMMUpro]

我也遇到这个问题了，目前也在等待解决方案 父子应用都是vue3+vite 按照官网在子应用中设置tagName： microApp.start({ tagName: 'micro-app-xxx', // 标签名称必须以 micro-app- 开头 }) 这样设置之后就会出现楼主所说的问题Uncaught TypeError: Illegal constructor 当我不设置tagName（直接用micro-app）时，就不报这个错误了，但是多层嵌套不设置tagName又会出现其它的问题，希望大佬修复一下这个问题，不然没办法上正式环境，多层嵌套是我们项目必须要使用的功能。 @bailicangdu 麻烦作者大大看一下，如需复现可以在开发群3找一下

[LAMMUpro]

@raoenhui 美女姐姐

[raoenhui]

@raoenhui 美女姐姐

我来试验下，方便的话可以加下我微信

[LAMMUpro]

好耶，我先弄个最小复现案例给你，争取今天

[raoenhui]

@cangdu 靠帮忙cangdu大佬看看 主应用：https://gitee.com/LAMMUpro/demo-microapp-main.git 子应用A：https://gitee.com/LAMMUpro/demo-microapp-app-a.git 子应用B：https://gitee.com/LAMMUpro/demo-microapp-app-b.git 复现过程：

1. 所有项目yarn vite启动后，打开主应用http://localhost:2666/
2. 点击侧边栏菜单（A应用 /a），查看控制台报错Illegal constructor 关键代码位置： 子应用A: /src/components/A.vue

[raoenhui]

@cangdu 靠帮忙cangdu大佬看看 主应用：https://gitee.com/LAMMUpro/demo-microapp-main.git 子应用A：https://gitee.com/LAMMUpro/demo-microapp-app-a.git 子应用B：https://gitee.com/LAMMUpro/demo-microapp-app-b.git 复现过程：

1. 所有项目yarn vite启动后，打开主应用http://localhost:2666/
2. 点击侧边栏菜单（A应用 /a），查看控制台报错Illegal constructor 关键代码位置： 子应用A: /src/components/A.vue

[LAMMUpro]

@bailicangdu 这个问题还没修好吗 @bailicangdu