vite+react项目作为子应用页面白屏

karlsbeard commented 3 days ago

问题描述

问题的具体描述基座应用：vue3.x+vue-cli@4.x history路由子应用: vite+react history路由

复现步骤

基座应用按照文档配置，并配置iframe沙箱
子应用开启跨域

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。基座应用：

复现仓库

请提供一个精简的代码仓库，然后上传到自己的 github，以帮助我们复现您的问题。

环境信息

micro-app版本：1.0.0-rc.13
主应用前端框架&版本：vue-cli@4.x + vue@3.x
子应用前端框架&版本：vite@5.x + react@18.x
构建工具&版本：见上

karlsbeard commented 3 days ago

更多错误信息截图：

timhub66 commented 1 day ago

有demo吗？

karlsbeard commented 1 day ago

有demo吗？

自己搞了个demo放在基座里是可以的，然后因为目前子应用比较复杂，然后导致渲染不出来。

目前自己通过和同事沟通，对于0.8.x和1.x的版本都能够渲染出来了，针对1.x版本而言：目前子应用通过cdn引入monaco-editor会陷入死循环，从而导致了上图的错误，这个是因为代码中和咱们iframe框架中的代码冲突了，导致出现了bug

此外，在vite dev环境下，还必须把基座应用的"关闭对子应用请求的拦截"给放开，使其能够拦截请求，这样才可完成渲染。如果是在vite preview环境中，则不用这么做（猜测应该是vite dev和 vite build不同导致的）

microApp.start({
  tagName: 'micro-app-eg',
  'disable-memory-router': true, // 关闭虚拟路由系统
  // 'disable-patch-request': true, // 关闭对子应用请求的拦截

karlsbeard commented 1 day ago

有demo吗？

自己搞了个demo放在基座里是可以的，然后因为目前子应用比较复杂，然后导致渲染不出来。

目前自己通过和同事沟通，对于0.8.x和1.x的版本都能够渲染出来了，针对1.x版本而言：目前子应用通过cdn引入monaco-editor会陷入死循环，从而导致了上图的错误，这个是因为代码中和咱们iframe框架中的代码冲突了，导致出现了bug

此外，在vite dev环境下，还必须把基座应用的"关闭对子应用请求的拦截"给放开，使其能够拦截请求，这样才可完成渲染。如果是在vite preview环境中，则不用这么做（猜测应该是vite dev和 vite build不同导致的）
microApp.start({
  tagName: 'micro-app-eg',
  'disable-memory-router': true, // 关闭虚拟路由系统
  // 'disable-patch-request': true, // 关闭对子应用请求的拦截

monaco-editor引入的代码如下：


    // loader.config({
    //   paths: {
    //     vs: '//unpkg.shop.jd.com/monaco-editor@0.36.1/min/vs',
    //   },
    //   'vs/nls': { availableLanguages: { '*': 'zh-cn' } },
    // })

karlsbeard commented 1 day ago

有demo吗？

还有想反馈的是，咱们官网的文档介绍有点太简略了，很多问题都得自己慢慢debug，然而github的discussion和communit又太慢了，期望能有一个外部群能够联系或者沟通，这样对于咱们community的发展也比较好

micro-zoe / micro-app