Attempting to get route results in Argument is not assignable to parameter of type 'keyof RouteNamedMap | undefined'

[SaucyJack]

Versions:

• Node: 20.15.1
• NPM: 10.7.0
• Vue: ^3.4.29
• vue-router: ^4.3.3
• typescript: ~5.4.0
• vite: ^5.3.1

unplugin-vue-router version 0.10.7

MacOS Sequoia 15.1.1
IDE: VS Code 1.96.0

I have a Vue project (composition API) with a "pages" folder structure something like this (I've omitted some aspects that are irrelevant):

src
│   App.vue
│   main.ts    
│
└───pages
│   └───dashboard
│       └───administration
│           └───automated-reports
│                │   [id].vue
│                │   index.vue
│           └───users
│                │   index.vue
│                └───[id]
│                    │   index.vue

I've reproduced this in this repository: https://github.com/SaucyJack/reproduce-ts-unplugin-router-error

in both automated-reports/[id].vue and users/[id]/index.vue, TypeScript/eslint produce an error when I attempt to get the route using vue-router, in code that looks like this:

import { useRoute } from 'vue-router'
// this produces a TS error
const route = useRoute('/dashboard/administration/automated-reports/:id')

The error is:

Argument of type '"/dashboard/administration/automated-reports/:id"' is not assignable to parameter of type 'keyof RouteNamedMap | undefined'.ts(2345)

I've run into this before and posted this SO question: https://stackoverflow.com/q/78898738/27457. I have tried all of the solutions offered there, and none of them fix the problem.

The code runs correctly with Vite using npm run dev.

It's also important to note that a friend was able to reproduce this only when he changed his Node version to 20.15.1. When he was using v18.18.2, the error did not appear.

[PindaPixel]

The error gives you the answer, it expects a keyof RouteNamedMap. Looking at your RouteNamedMap:

// typed-router.d.ts

export interface RouteNamedMap {
    '/dashboard/administration/automated-reports/': RouteRecordInfo<'/dashboard/administration/automated-reports/', '/dashboard/administration/automated-reports', Record<never, never>, Record<never, never>>,
    '/dashboard/administration/automated-reports/[id]': RouteRecordInfo<'/dashboard/administration/automated-reports/[id]', '/dashboard/administration/automated-reports/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
    '/dashboard/administration/users/': RouteRecordInfo<'/dashboard/administration/users/', '/dashboard/administration/users', Record<never, never>, Record<never, never>>,
    '/dashboard/administration/users/[id]/': RouteRecordInfo<'/dashboard/administration/users/[id]/', '/dashboard/administration/users/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
    '/dashboard/reports/some-report': RouteRecordInfo<'/dashboard/reports/some-report', '/dashboard/reports/some-report', Record<never, never>, Record<never, never>>,
  }

The key you're looking for is /dashboard/administration/automated-reports/[id]. Autocomplete should suggest this, do you get TypeScript hinting at all?