問題描述

動態引入元件時，出現元件A能正常引入且頁面可顯示，元件B引入失敗。

• Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
  

引入程式碼

let ActiveCp = () => ({
        component: import("." + index)
            .then(function (res) {
            //   if (curCp.newComponentName) {
            //   res.default.name = curCp.newComponentName
            // } ;
              console.log(res)
              return res.default;
            })
            .catch(function (e) {
            }),
        delay: 200,
        timeout: 30000,
      });
 

解決辦法：

在使用import語句時，指定檔案字尾名

let ActiveCp = () => ({
        component: import("." + index + '.vue')  // 需指定檔案字尾名，明確載入的元件檔案。
            .then(function (res) {
            //   if (curCp.newComponentName) {
            //   res.default.name = curCp.newComponentName
            // } ;
              console.log(res)
              return res.default;
            })
            .catch(function (e) {
            }),
        delay: 200,
        timeout: 30000,
      });
 

問題出現原因

未知