For my personal project, I am using Vite alongside Vue 3 and have integrated vue-router@4 for managing routes. Since all of my modules share the same set of routes, I created a helper function:
import { RouteRecordRaw } from 'vue-router'
import pluralize from 'pluralize'
import Str from '@supercharge/strings'
export function createRoutes(name: string): Array<RouteRecordRaw> {
const plural = pluralize.plural(name)
const path = Str(plural).trim().lower().kebab().get()
const module = Str(plural).trim().studly().get()
const titleSingular = Str(pluralize.singular(name)).title().get()
const titlePlural = Str(plural).title().get()
return [
{
path: `/${path}`,
name: titlePlural,
component: () => import(`@/views/${module}/index.vue`),
},
{
path: `/${path}/:id`,
name: titleSingular,
component: () => import(`@/views/${module}/Single.vue`),
},
{
path: `/${path}/new`,
name: `New ${titleSingular}`,
component: () => import(`@/views/${module}/New.vue`),
},
]
}
A problem arises because Vite does not seem to support dynamic imports.
3:05:29 pm [vite] warning:
G:/Dev/world-building/client/src/router/util.ts
21 | path: `/${path}/new`,
22 | name: `New ${titleSingular}`,
23 | component: () => import(`@/views/${module}/New.vue`)
| ^
24 | }
25 | ];
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.
Plugin: vite:import-analysis
File: G:/Dev/world-building/client/src/router/util.ts
I checked the provided link to understand the limitations, but my approach seems to align with the supported formats.
Why isn't my code functioning properly? Everything looks correct, yet I keep receiving the warning mentioned above (and encounter an error in the console when attempting to access routes using dynamic imports).
As additional information, the error displayed in the console reads:
TypeError: Failed to resolve module specifier '@/views/Galaxies/index.vue'