So i've developed an Vue/Vite/Vuex/VueRouter SPA that uses a Laravel API for data. Everything works completely fine when running the Vite development server with HMR. Most importantly Routing works in development. I'm also using Quasar (Vue UI library)
The moment I build the project and run npm run preview some routes stop working. The route guards preventing me from opening routes that require authentication do their job correctly (automatically redirects to "/login"). The issue arises when I am logged in. I can't navigate to a single route other than "/". I've tried to programmatically push routes and also with router links. As soon as I on a vue router link an error shows up in my console: TypeError: l.then is not a function. This error only shows up in production build. I don't know where to start debugging.
Does anyone know how to get around this bug? Does anyone know how I can debug this?
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/pages/Authentication/Login.vue'
import Dashboard from '@/pages/Dashboard.vue'
import Testing from '@/pages/Testing.vue'
import New from '@/pages/New.vue'
import NieuweTest from '@/pages/NieuweTest.vue'
import Detesten from '@/pages/Detesten.vue'
// import MyTests from '@/pages/MyTests.vue'
import ShowTest from '@/pages/ShowTest.vue'
import TestLibrary from '@/pages/TestLibrary.vue'
import MyQuestions from '@/pages/MyQuestions.vue'
import Import from '@/pages/Import.vue'
import Categories from '@/pages/Categories.vue'
import TestResults from '@/pages/TestResults.vue'
import store from '@/store'
// only allows going to next route if person is authenticated
const authenticationGuard = function (to, from, next) {
if (!store.getters['auth/authenticated']) {
return next({
name: 'login',
})
}
next()
}
// only allows going to next route if person is NOT authenticated
const guestMiddleware = function (to, from, next) {
if (store.getters['auth/authenticated']) {
return next({
name: 'dashboard',
})
}
next()
}
const routes = [
{
path: '/login',
name: 'login',
component: Login,
beforeEnter: [guestMiddleware],
},
{
path: '/',
name: 'dashboard',
component: Dashboard,
beforeEnter: [authenticationGuard],
},
{
path: '/questions/categories',
name: 'testing',
component: Testing,
beforeEnter: [authenticationGuard],
},
{
path: '/nieuwe',
name: 'nieuwe',
component: NieuweTest,
beforeEnter: [authenticationGuard],
},
{
path: '/detesten',
name: 'detesten',
component: Detesten,
beforeEnter: [authenticationGuard],
},
// {
// path: '/my-tests',
// name: 'tests.index',
// component: () => MyTests,
// beforeEnter: [authenticationGuard],
// },
{
path: '/my-tests/:test',
name: 'tests.show',
component: () => ShowTest,
props: (route) => ({ id: parseInt(route.params.test) }),
beforeEnter: [authenticationGuard],
children: [
{
path: 'results/:uuid',
name: 'tests.show.results',
component: () => TestResults,
props: (route) => ({ ...route.params, uuid: route.params.uuid }),
beforeEnter: [authenticationGuard],
},
],
},
{
path: '/test-library',
name: 'tests.library',
component: () => TestLibrary,
beforeEnter: [authenticationGuard],
},
{
path: '/questions',
name: 'questions.index',
component: () => MyQuestions,
beforeEnter: [authenticationGuard],
},
{
path: '/questions/import',
name: 'questions.import',
component: () => Import,
beforeEnter: [authenticationGuard],
},
{
path: '/questions/categories',
name: 'questions.categories',
component: () => Categories,
beforeEnter: [authenticationGuard],
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
server: {
host: '0.0.0.0',
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
plugins: [
vue({
template: { transformAssetUrls },
}),
quasar({
sassVariables: 'src/quasar-variables.sass',
dark: 'auto',
}),
],
})