子应用中使用@arcgis/map-components 组件无法加载和渲染

[jawe5321]

问题描述

主应用是vite+Vue3项目，子应用也是vite+Vue3项目，子应用中有个地图组件 @arcgis/map-components
子应用单独打开可以正常渲染地图，在主应用中打开 无法渲染。

复现步骤

1.子应用导入import "@arcgis/map-components/components/arcgis-map";
<arcgis-map ref="arcgisMap" basemap="topo-vector" zoom="4" center="15, 65" @arcgisViewReadyChange="arcgisViewReadyChange">
2.主应用加载子应用

上传截图

代码截图

代码

Welcome to Vue 3 + Vite + ArcGIS

ArcGIS Map Component Example

  <arcgis-map ref="arcgisMap" basemap="topo-vector" zoom="4" center="15, 65" @arcgisViewReadyChange="arcgisViewReadyChange">
    <arcgis-zoom position="top-left"></arcgis-zoom>
    <arcgis-legend position="bottom-left"></arcgis-legend>

  </arcgis-map>

</div>

<script setup> import { onMounted, ref } from 'vue'; import "@arcgis/map-components/components/arcgis-map"; import "@arcgis/map-components/components/arcgis-zoom"; import "@arcgis/map-components/components/arcgis-legend"; import "@arcgis/map-components/components/arcgis-basemap-gallery"; const show = ref(false); const arcgisMap = ref(); onMounted(() => { // const arcgisMap = document.querySelector("arcgis-map"); // arcgisMap.addEventListener("arcgisViewReadyChange", (event) => { // console.log('Map component is ready', event); // }); show.value = true; }) const arcgisViewReadyChange = (event) => { console.log("arcgisMap:",arcgisMap.value) console.log('Map component is arcgisViewReadyChange', event); }; </script>

代码可以直接运行，放到主应用加载就出不来。

环境信息

• micro-app版本：MicroApp版本1.0.0-rc.26
• 主应用前端框架&版本："vue": "3.5.12",
• 子应用前端框架&版本："vue": "^3.5.13",
• 构建工具&版本："vite": "^6.3.1"

[jawe5321]

micro-app版本：MicroApp版本1.0.0-rc.26
主应用前端框架&版本： "vue": "3.5.12",
子应用前端框架&版本："vue": "^3.5.13",
构建工具&版本："vite": "^6.3.1"