fix(router): add workaround for dynamic import error

vuetifyjs · Jul 6, 2024 · fa4d655 · fa4d655
1 parent 1314f3c
commit fa4d655
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/template/javascript/base/src/router/index.js b/template/javascript/base/src/router/index.js
@@ -11,5 +11,23 @@ import { createRouter, createWebHistory } from 'vue-router/auto'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
 })
+// Workaround for https://github.com/vitejs/vite/issues/11804
+router.onError((err, to) => {
+  if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
+    if (!localStorage.getItem('vuetify:dynamic-reload')) {
+      console.log('Reloading page to fix dynamic import error')
+      localStorage.setItem('vuetify:dynamic-reload', 'true')
+      location.assign(to.fullPath)
+    } else {
+      console.error('Dynamic import error, reloading page did not fix it', err)
+    }
+  } else {
+    console.error(err)
+  }
+})
+
+router.isReady().then(() => {
+  localStorage.removeItem('vuetify:dynamic-reload')
+})
 
 export default router
diff --git a/template/typescript/base/src/router/index.ts b/template/typescript/base/src/router/index.ts
@@ -11,4 +11,23 @@ const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
 })
 
+// Workaround for https://github.com/vitejs/vite/issues/11804
+router.onError((err, to) => {
+  if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
+    if (!localStorage.getItem('vuetify:dynamic-reload')) {
+      console.log('Reloading page to fix dynamic import error')
+      localStorage.setItem('vuetify:dynamic-reload', 'true')
+      location.assign(to.fullPath)
+    } else {
+      console.error('Dynamic import error, reloading page did not fix it', err)
+    }
+  } else {
+    console.error(err)
+  }
+})
+
+router.isReady().then(() => {
+  localStorage.removeItem('vuetify:dynamic-reload')
+})
+
 export default router