micro-app
micro-app copied to clipboard
micro-zoe
子应用引用第三方库报错
问题描述
问题的具体描述 子应用中引用了esri-loader 这个包，执行loadModules 方法的时候，应用单独运行没问题，集成到基座中就报错，代码如下：
<template>
<div class="page3">
<div class="view-div" ref="mapRef"></div>
<router-link to="/">
<el-button type="primary" plain>返回首页</el-button>
</router-link>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { loadModules, loadCss } from "esri-loader";
loadCss();
const mapRef = ref();
onMounted(() => {
loadModules(["esri/Map", "esri/views/MapView"])
.then(([Map, MapView]) => {
debugger;
const map = new Map({
basemap: "topo-vector",
});
const view = new MapView({
container: mapRef.value,
map: map,
center: [118.24, 34.01],
zoom: 12,
});
})
.catch((err) => {
console.error(err);
});
});
</script>
<style scoped>
.page3 {
width: 80vw;
height: 60vh;
margin: 0 auto;
background: #fff;
padding: 40px;
}
.view-div{
width: 100%;
height: 100%;
}
</style>
报错如下：
复现步骤
1.子应用dev/children/vue3 中安装esri-loader包 2.在 micro-app 源码 dev/children/vue3/src/pages/目录中，新建page3.vue 3.添加page3 路由，并在home页添加page3的route-link 4.基座应用中打开 vue3应用 子应用，跳转到 page3页面
上传截图
请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。 代码截图：
复现仓库
请提供一个精简的代码仓库，然后上传到自己的 github，以帮助我们复现您的问题。
环境信息
- micro-app版本：~1.0.0
- 主应用前端框架&版本：main-react16
- 子应用前端框架&版本：dev/vue3
- 构建工具&版本：vue-cli
当micro-app 内部执行 https://js.arcgis.com/4.23/init.js 这个js的时候报错，报错行如下：
https://js.arcgis.com/4.23/init.js 中内部引用了dojo，dojo 是基于require.js 进行二次封装的一个面向对象库，amd 模块化加载
我esri-loader 这个包主要是 加载 https://js.arcgis.com/4.23/init.js ，引用其中的模块，调试发现，esri-loader中把 init.js这个script 脚本添加到body中，但是micro-app中貌似重写了document.body.apendChild这个方法，init.js这个script 脚本并没有添加到 body中，而是fetch 到init.js这个代码，自动执行了它，而esri-loader中有调用init.js 中挂载到window中全局的方法，从而执行报错，具体调试代码如下：
这里micro-app 并不是添加script 到 body中，而是动态的去执行里面的js代码
