4.2.0 - Type error when extending ComponentCustomProperties

[parafeu]

Reproduction

https://stackblitz.com/edit/vitejs-vite-9iezka?file=src/vue.d.ts

Steps to reproduce the bug

Using vite, create a d.ts file extending ComponentCustomProperties
Use $route or $router in any component template.
Try to build your code with npm run build

Expected behavior

When using vue-router 4.1.6, there is no compilation error.

Actual behavior

Here is the error durring code build :

error TS2339: Property '$route' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: { key?: string | number | symbol | undefined; ref?: VNodeRef | undefined; ref_for?: boolean | undefined; ... 8 more ...; style?: unknown; }; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (arg...'.

2   <div>{{ $route.name }}</div>
            ~~~~~~


Found 1 error in src/pages/Home.vue:2·

Additional information

No response

[posva]

This shouln't be related to vue-router, but it seems like you need to extend vue itself in Vue 3.3 🤔 :

declare module 'vue' {
  interface ComponentCustomProperties {
    $helloWorld: () => void;
  }
}

I think others have seen this problem in Nuxt and Vuetify so I will still give it a look and share with team.
I will come back if if I have any news 🙂

[cturconde]

I explained how to solve this on version 4.2.0 here

[parafeu]

This shouln't be related to vue-router, but it seems like you need to extend vue itself in Vue 3.3 🤔 :

declare module 'vue' {
  interface ComponentCustomProperties {
    $helloWorld: () => void;
  }
}

I think others have seen this problem in Nuxt and Vuetify so I will still give it a look and share with team. I will come back if if I have any news 🙂

Thanks for this answer !

I have the same issue in my project using declare module 'vue', but I need to find what the difference with the small reproduction I did 🤔.

[posva]

I imagine that if you have a package that used the runtime-core you would still see the problem 🤔

[parafeu]

I use https://github.com/antfu/unplugin-vue-components, which generates a components.d.ts file that uses @vue/runtime-core. However, changing it to vue doesn't make a difference.

The weird thing is that it's working with Vue 3.3 and Vue Router 4.1.6, so maybe it's not only related to the new Vue version?

[Mini-ghost]

router/packages/router/src/globalExtensions.ts

Line 11 in 3c8ed44

declare module 'vue' {

I'm not sure if it's a problem here, but I'm using vue 3.3.1 and vue-router 4.2.0. I also made adjustments to the vue-router.d.ts file and it works.

// declare module 'vue' {
declare module '@vue/runtime-core' {
  // ...
}

[jfrs]

Is this a vue-router issue then?

[feiYouLian]

Is there a workaround, I'm also having the same issue, thanks

[ByScripts]

Same problem here.

We are using Vue 3.2.

We are not using declare module 'vue' nor interface ComponentCustomProperties in our code.

[ByScripts]

I tried the code from @cturconde

In node_modules/vue-router/dist/vue-router.d.ts at line 1434, I replaced declare module 'vue' with declare module '@vue/runtime-core'.

It indeed fixes the issue, but is of course not an acceptable solution.

[posva]

I reverted the change until we can figure out a better rollout strategy for this change