Same issue here. In the Quasar docs it says to update the Vue components by adding the tag <script lang="ts">.
. But even when doing so the import
doesn’t work.
routes.ts
const routes = [
{
path: '/',
// component: () => import('../layouts/MainLayout.vue'),
component: () => import('layouts/MainLayout.vue'),
children: [
{ path: '', component: () => import('pages/Index.vue'), },
{ path: 'login', component: () => import('pages/Login.vue') },
{ path: 'tickets', component: () => import('pages/Tickets/Index.vue') },
{ path: 'settings', component: () => import('pages/Settings.vue') },
{ path: 'profile', component: () => import('pages/Profile.vue') ,}
]
},
]
// Always leave this as last one
if (process.env.MODE !== 'ssr') {
routes.push({
path: '*',
component: () => import('pages/Error404.vue'),
children: []
})
}
export default routes
MainLayout.vue
<template>
<q-layout view="hHh lpR fFf">
<app-header />
<app-SidebarNavigationMenu :links="mainNavigationLinks" />
<q-page-container>
<router-view />
</q-page-container>
<app-footer :links="mainNavigationLinks" />
</q-layout>
</template>
<script lang="ts">
import { mapState } from "vuex"
export default {
computed: {
...mapState('navigation', ['mainNavigationLinks'])
},
components: {
appHeader: () => import("components/Header.vue"),
appFooter: () => import("components/Footer.vue"),
appSidebarNavigationMenu: () => import("components/SidebarNavigationMenu.vue"),
},
}
</script>
Rerported error
ERROR in T:/hc-it-portal/frontend/src/router/routes.ts(20,22):
TS2322: Type 'Promise<typeof import("T:/hc-it-portal/frontend/src/pages/Error404.vue")>' is not assignable to type 'Promise<typeof import("T:/hc-it-portal/frontend/src/layouts/MainLayout.vue")>'.
Type 'typeof import("T:/hc-it-portal/frontend/src/pages/Error404.vue")' is not assignable to type 'typeof import("T:/hc-it-portal/frontend/src/layouts/MainLayout.vue")'.
Types of property 'default' are incompatible.
Type '{ name: string; }' is missing the following properties from type '{ computed: { mainNavigationLinks: Computed; }; components: { appHeader: () => Promise<typeof import("T:/hc-it-portal/frontend/src/components/Header.vue")>; appFooter: () => Promise<...>; appSidebarNavigationMenu: () => Promise<...>; }; }': computed, components
Version: typescript 3.8.3
Time: 1656 ms
If anyone found a solution, thank you for sharing it.