micro-app微前端框架中react-konva无法正常渲染的问题求助

问题描述 #

使用micro-app微前端框架时，嵌入的React-Konva子应用无法正常渲染画布内容，仅输出空的<div></div>标签。

问题原因 #

micro-app的沙箱机制会严格隔离子应用的顶层变量，禁止其自动泄漏为全局变量：

• 常规浏览器环境中，通过var name或function name() {}定义的顶层变量会自动挂载到window对象，可通过window.name或直接访问name获取；
• 但在micro-app沙箱环境中，这类变量不会被挂载到全局window，导致window.name或name返回undefined，而React-Konva内部逻辑依赖该全局变量，最终引发渲染失败。

解决方案 #

方案1：子应用手动挂载全局变量 #

在React-Konva子应用的入口文件中，手动将依赖的全局变量挂载到window：

// 确保window.name存在，避免undefined
window.name = window.name || 'konva-subapp'

方案2：容器端配置沙箱排除变量 #

在容器应用的micro-app初始化配置中，将需要的变量排除在沙箱隔离范围外：

microApp.start({
  excludeVariables: ['name']
})

内容的提问来源于stack exchange，提问作者pengbo liu