qiankun 報錯:Target container with #container not existed while xxx mounting!


關於這個報錯,官方文檔說的及其不完善,且信息太少。

 意思就是:主應用為VUE時,路由含有過渡效果,就會出現。

但是這只是報這個錯誤的一種可能,不一定是主應用引起,子應用也會。

報此錯的原因是:渲染子應用的過程中,container容器丟失導致;

 

我遇到這個問題背景:主應用是 react,子應用 vue。

以及追溯過程:

  1. 打了斷點調試,發現在render的時候一開始是有 container容器的,但是到后面,整個頁面的dom都丟失了。
  2. 注冊子應用的時候,執行完loadApp函數會調用一次render,這時可以獲取到container,函數會返回一個mount的隊列;這個隊列在后面執行的時候container為null
  3. 這時猜測是中間有代碼,更改了document,但是無法確定是子應用、還是主應用。
  4. 首先排查主應用,切換子應用之后,可以正常接入。因此是子應用問題。
  5. 繼續排查子應用,在子應用的index.html文件中發現問題代碼 document.write
  6. 刪去后,子應用正常接入。

 

結論:

Target container with #container not existed while xxx mounting

說明它一開始是有container容器的,因為如果一開始就沒有的話,報錯應該是:Target container with #container not existed while xxx loading

一開始有,中途沒有了,那就一定是有代碼改變了document,導致container丟失。所以需要從這個原因取排查代碼。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM