"Property 'default' does not exist on type '{}'." On Router-view and Router-link v-slot

[metkm]

Repository to reproduce the error
https://github.com/sibyl666/issue

When v-slot is used with router-view it gives the error "Property 'default' does not exist on type '{}'."
this wasn't an issue a while ago with the same vue-router version on another repo, When I check the other repo it shows the same error so that's why I think the issue is related to the extension. Repository created with
yarn create vite issue --template vue-ts

Vue Language Features (Volar) version v0.27.27
TypeScript Vue Plugin (Volar) version v0.27.27

[sapphi-red]

Creating components.d.ts fixed for me. (https://github.com/johnsoncodehk/volar#using)

But I have a different error when noPropertyAccessFromIndexSignature is true.

Property 'default' comes from an index signature, so it must be accessed with ['default'].

[metkm]

Thanks, @sapphi-red! The issue is gone. But I won't close this issue because you have another issue, or should I close it?

[ndh103]

I have the same issue, and adding components.d.ts seems not working for me :(

[metkm]

@ndh103 I added components.d.ts in src folder and pasted

declare module 'vue' {
  export interface GlobalComponents {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
}

In it. Maybe you can share repo to reproduce the issue

[quezadaesteban]

I have red squiggles in all my v-slots/ #slots in this version. Nuxt + Composition API. Moving to 0.27.26 fixed it. Will comment later if it gets fixed with a future version.

[ndh103]

@ndh103 I added components.d.ts in src folder and pasted

declare module 'vue' {
  export interface GlobalComponents {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
}

In it. Maybe you can share repo to reproduce the issue

I will try to put it in src folder and see. if it works

[ndh103]

@Sibyl666 I tried with components.d.ts and it still not work
Here are my repo branch that you can have a look
https://github.com/ndh103/person-hub/blob/features/error-with-volar/person-hub-web/src/views/home/events/EventDetails.vue

[innocenzi]

Having a similar, possibly related issue with locally-imported components:

<script setup lang="ts">
import { Menu } from '@headlessui/vue'
//...
</script>

<template>
  <!-- -->
  <Menu v-slot="{ open }">
    <!-- -->
  <Menu>
  <!-- -->
</template>

This is using v0.27.27, but I'm unsure if this is normal because v0.26.26 shows the type any instead.

Here is what the component in its d.ts looks like:

Details

export declare let Menu: import("vue").DefineComponent<{
    as: {
        type: (ObjectConstructor | StringConstructor)[];
        default: string;
    };
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
}>[] | null | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
    as: string;
} & {}>, {
    as: string;
}>;

Its source code is here if it's of any help.

If the "error" is intended on Volar's side, what's the workaround for me to hide the error?

[johnsoncodehk]

Fixed in d587ab1, please wait for release or use 0.27.26 for now, thanks!

@innocenzi it's fixed in #540.

Please keep this issue open, I will close when I release new version.