Vue路由懒加载报错，ChunkLoadError: Loading chunk 0 failed，需要二次进入子应用或者在子应用中刷新才正常。

[AprilLemon]

问题

Vue路由懒加载报错，ChunkLoadError: Loading chunk 0 failed，需要二次进入子应用或者在子应用中刷新才正常。

复现仓库(若mac无法复现，则需要在windws上查看)

https://gitee.com/lianghanbo/qiankun-bug.git

版本依赖

• qiankun Version: ^2.6.3
• Platform Version: Windows 10 专业版 Intel(R) Core(TM) i5-4460
• Browser Version: Google Chrome 版本 97.0.4692.71（正式版本） （64 位）
• qiankun Version: ^2.6.3
• vue: ^2.6.11
• vue-router: ^3.2.0

[AprilLemon]

[AprilLemon]

[china-dywade]

问一下您这个问题解决了吗？

[AprilLemon]

问一下您这个问题解决了吗？

没有，你可以用2.0.26版本的，没这方面的问题

[121595113]

#1232

[xiaoqiangz]

我也遇到这个问题了，目前有10个子应用，就其中一个路由懒加载出现了这个问题。。。

[huangche007]

我也遇到了，有没有哪位大佬有比较好的解决办法

[zeyongTsai]

@AprilLemon 子应用的 publicPath 配置有问题，不应该使用相对路径

[AprilLemon]

@zeyongTsai 没办法得相对。

[superermiao]

请问这个解决了吗？我现在也是遇到这个问题，我现在本地运行就这样了

[KokoTa]

同样的问题，子应用的路由如果不是懒加载就没事，但是使用了懒加载的话就会出现 ChunkLoadError: Loading chunk xxx failed. 的问题，主应用在 router 中设置 beforeEach setTimeout 可以暂时解决问题

[devinRex]

断点发现是子系统在load 异步 chunk的时候用的document.head.appendChild 没有被代理，但是单纯的demo是可以跑通的，怀疑是多个loadMicroApp的问题

[aMiing]

2.0.26也能复现一样的问题

[xrds]

我同样出现了类似的问题， 我是主应用>子应用>孙应用 ；

子应用 可以正常加载，孙级应用 加载时报错；

原因在高版本qiankun，子应用嵌入时生成了 qinkun-head 标签 导致 孙级应用将chunk包 创建到了， 主应用的head标签下， 使孙级应用加载chunk文件失败。

我用的是 umijs 具体解决办法是锁定qinkun的版本

"peerDependencies": { "@umijs/plugin-qiankun": "2.40.0", "qiankun": "2.7.0" }

希望对大家有帮助

[kuitos]

版本都升到最新就行了，不用锁版本

[Kathy2016]

我是最新版的，qiankun 2.10.3，但也有这个问题

[kuitos]

嵌套场景每个主应用都需要是最新版本

[linhuiw]

主应用和子应用，使用到 qiankun 的都升级到最新版本了，并没有解决问题。

[kuitos]

那说明不是同一个问题。可以单独提个issue提供复现仓库看下

[linhuiw]

那说明不是同一个问题。可以单独提个issue提供复现仓库看下

验证是这个问题，跟这个 issue描述的一致：#1232
复现的仓库可以参考这个 umijs/plugins#671

[devinRex]

我之前遇到过同样的问题，提供一些排查方向吧
vue的异步chunk是这么装载的：

var onScriptComplete = (prev, event) => {
                              // avoid mem leaks in IE.
script.onerror = script.onload = null;
    clearTimeout(timeout);
    var doneFns = inProgress[url];
    delete inProgress[url];
    script.parentNode && script.parentNode.removeChild(script);
    doneFns && doneFns.forEach((fn) => (fn(event)));
    if(prev) return prev(event);
}
;
var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
script.onerror = onScriptComplete.bind(null, script.onerror);
script.onload = onScriptComplete.bind(null, script.onload);needAttach && document.head.appendChild(script);

正常情况下appendChild会被 qiankun 劫持，但是劫持有一个前置条件，就是appendChild类似的一些方法，在 qiankun初始之后，没有发生过变化，否则这个劫持不会成立

const rawHeadAppendChild = HTMLHeadElement.prototype.appendChild;
const rawHeadRemoveChild = HTMLHeadElement.prototype.removeChild;
const rawBodyAppendChild = HTMLBodyElement.prototype.appendChild;
const rawBodyRemoveChild = HTMLBodyElement.prototype.removeChild;
const rawHeadInsertBefore = HTMLHeadElement.prototype.insertBefore;
const rawRemoveChild = HTMLElement.prototype.removeChild;


if (
    HTMLHeadElement.prototype.appendChild === rawHeadAppendChild &&
    HTMLBodyElement.prototype.appendChild === rawBodyAppendChild &&
    HTMLHeadElement.prototype.insertBefore === rawHeadInsertBefore
  ) {
    HTMLHeadElement.prototype.appendChild = getOverwrittenAppendChildOrInsertBefore({
      rawDOMAppendOrInsertBefore: rawHeadAppendChild,
      containerConfigGetter,
      isInvokedByMicroApp,
      target: 'head',
    }) as typeof rawHeadAppendChild;
    HTMLBodyElement.prototype.appendChild = getOverwrittenAppendChildOrInsertBefore({
      rawDOMAppendOrInsertBefore: rawBodyAppendChild,
      containerConfigGetter,
      isInvokedByMicroApp,
      target: 'body',
    }) as typeof rawBodyAppendChild;

    HTMLHeadElement.prototype.insertBefore = getOverwrittenAppendChildOrInsertBefore({
      rawDOMAppendOrInsertBefore: rawHeadInsertBefore as any,
      containerConfigGetter,
      isInvokedByMicroApp,
      target: 'head',
    }) as typeof rawHeadInsertBefore;
  }

代码里面代理对应的方法，或者部分浏览器插件都可能会造成这个影响，

[linhuiw]

目前发现微组件切换之后，这个条件不成立了，所以会导致 appendChild 重写失败。删掉这个判断条件就可以解决问题。

if (
    HTMLHeadElement.prototype.appendChild === rawHeadAppendChild &&
    HTMLBodyElement.prototype.appendChild === rawBodyAppendChild &&
    HTMLHeadElement.prototype.insertBefore === rawHeadInsertBefore
  ) {

不过目前还没有想到很好的解决方法。 @devinRex

[kuitos]

已兼容，released v2.10.4

[UzumakiHan]

v2.10.14也遇到了这样的问题

[wzy1184916500]

目前使用2.10.14，还是存在这样的问题