resolved import async components issue with vue3-sfc-loader

frontend/public/index.html

@@ -7,7 +7,6 @@
     <link href="<%= BASE_URL %>favicon.ico" rel="icon">
     <link href="font-awesome.min.css" rel="stylesheet">
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <script src="/js/vue.global.js"></script>
     <script src="/js/vue3-sfc-loader.js"></script>
     <style>
         #loading-placeholder {

frontend/public/vue/App.vue

@@ -4,10 +4,9 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue';
 import HelloWorld from './HelloWorld.vue';
 
-export default defineComponent({
+export default {
   name: 'App',
   components: {
     HelloWorld,
@@ -15,5 +14,5 @@ export default defineComponent({
   setup() {
     return {};
   },
-});
+};
 </script>

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});
       }

frontend/vue.config.js

@@ -4,7 +4,7 @@ module.exports = {
       entry: 'src/main.ts',
       template: 'public/index.html',
       filename: 'index.html',
-      title: 'Crawlab | Distributed Web Crawler Admin Platform',
+      title: 'Crawlab | Distributed Web Crawler Admin Platform'
     }
   }
 }