qiankun 的子应用docx-preview失效(本质上是jszip.js中的setimmediate失效)

现象

qiankun中子应用中使用docx-preview无法正常生效,会卡在renderAsync异步方法,

调试

以下操作均在子应用中完成

  1. 删除npm管理的的docx-preview,

  2. 通过github docx-preview中的cdn引用方式,把docx-preview.jsjszip.js下载到本地,在index.html中引用。

  3. 在使用的地方改成docx.renderAsync

  4. 在下载到本地的两个js中写debugger打断点

  5. 最终定位到关键代码var onGlobalMessage这个函数中有个if语句event.source === global 在这里插入图片描述

  6. 在qiankun中global会被qiankun代理,外层包裹一个proxy不再等于event.source,然后导致永远无法执行下面的方法去postmessage

修改

  1. 重新安装docx-preview
  2. 使用pnpm pactch 对node_module中的docx-preview进行打补丁,具体教程自行搜索 pnpm pactch使用
  3. 关键改动:在jszip.min.js中搜索e.source===r,然后改成(e.source===r||r.__POWERED_BY_QIANKUN__),对应的jszip.js的代码是

在这里插入图片描述

深入

深入研究后发现,这不是jszip包的问题是引用的setimmediate包的问题,定位到这一行setImmediate-Line87
至此彻底搞明白了问题关键。

其他解决方法

还有一个简单的解决办法,在主应用index.html中用cdn方式引用docx-preview.min.js,jszip.min.js可以快速解决问题,适合快速修复。不过比较粗暴。
比较推荐上面在子应用中pnpm patch的方式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值