resolved import async components issue with vue3-sfc-loader

frontend/src/interfaces/global.d.ts

@@ -1,11 +1,6 @@
-import Vue from 'vue';
-
-declare global {
-  interface Window {
-    initCanvas?: Function;
-    resetCanvas?: Function;
-    _hmt?: Array;
-    'vue3-sfc-loader': { loadModule };
-    Vue: Vue;
-  }
+interface Window {
+  initCanvas?: Function;
+  resetCanvas?: Function;
+  _hmt?: Array;
+  'vue3-sfc-loader': { loadModule };
 }

frontend/src/interfaces/vue3-sfc-loader.d.ts

@@ -0,0 +1,9 @@
+// declare module 'vue3-sfc-loader' {
+//   import {AbstractPath, ModuleExport, Options} from 'vue3-sfc-loader/dist/types/vue3/types';
+//
+//   declare function loadModule(path: AbstractPath, options?: Options): Promise<ModuleExport>;
+//
+//   declare type AbstractPath = {
+//     toString(): string;
+//   }
+// }

frontend/src/main.ts

@@ -15,6 +15,7 @@ import 'element-plus/lib/theme-chalk/index.css';
 import '@/styles/index.scss';
 import {initBaiduTonji} from '@/admin/baidu';
 
+// fontawesome
 library.add(fab, far, fas);
 
 // baidu tongji
@@ -23,6 +24,7 @@ initBaiduTonji();
 // remove loading placeholder
 document.querySelector('#loading-placeholder')?.remove();
 
+// app
 const app = createApp(App);
 app
   .use(store)

frontend/src/utils/sfc.ts

@@ -1,26 +1,26 @@
-const vue = window['Vue'];
+import * as vue from '@vue/runtime-dom';
 const {loadModule: sfcLoadModule} = window['vue3-sfc-loader'];
 
-export const getLoadModuleOptions = () => {
+export const getLoadModuleOptions = (): any => {
   return {
     moduleCache: {
       vue,
     },
-    pathResolve({ refPath, relPath }: {refPath?: string; relPath?: string}) {
+    pathResolve({refPath, relPath}: { refPath?: string; relPath?: string }) {
       // self
-      if ( relPath === '.' ) {
+      if (relPath === '.') {
         return refPath;
       }
 
       // relPath is a module name ?
-      if ( relPath?.[0] !== '.' && relPath?.[0] !== '/' ) {
+      if (relPath?.toString()?.[0] !== '.' && relPath?.toString()?.[0] !== '/') {
         return relPath;
       }
 
-      return String(new URL(relPath, refPath === undefined ? window.location.toString() : refPath));
+      return String(new URL(relPath.toString(), refPath === undefined ? window.location.toString() : refPath.toString()));
     },
     async getFile(url: string) {
-      const res = await fetch(url);
+      const res = await fetch(url.toString());
       if (!res.ok) {
         throw Object.assign(new Error(res.statusText + ' ' + url), {res});
       }