invictus-codes / nuxt-vuetify

Add Vuetify 3 to your Nuxt application in seconds.
MIT License
73 stars 9 forks source link

[Bug]: Type of property circularly references itself in mapped type #17

Open JuroOravec opened 1 year ago

JuroOravec commented 1 year ago

What happened?

In Nuxt3, I define an auto-imported composable (in composables folder) that imports Vuetify component types, like so:

// ./composables/useComposable.ts
import type { VDialog } from 'vuetify/lib/components/index.mjs';

export const useComposable= (x: VDialog['$props']) => {
  // ...
};

When the nuxt types are generated (with npx nuxt prepare), I start getting TypeScript errors about circular dependency:

'useComposable' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
Type of property 'useComposable' circularly references itself in mapped type 'Omit<Omit<{ $: ComponentInternalInstance; $data: {}; $props: { absolute?: boolean | undefined; location?: Anchor | undefined; origin?: "auto" | Anchor | "overlap" | undefined; ... 50 more ...; "onClick:outside"?: ((e: MouseEvent) => any) | undefined; }; ... 10 more ...; $watch<T extends string | ((...args: any) => a...'.ts(2615)

My Nuxt config is like this:

export default defineNuxtConfig({
  modules: ['@invictus.codes/nuxt-vuetify'],
  vuetify: {
    vuetifyOptions: {
      defaults: { ... },
      icons: {
        defaultSet: 'mdi',
        aliases: iconAliases,
        sets: {
          mdi,
        },
      },
      aliases,
    },
    moduleOptions: {
      treeshaking: true,
      useIconCDN: true,
      styles: 'sass',
      autoImport: true,
    },
  },

I wonder how it is possible that the type VDialog references the auto-imported composable useComposable.

Since this issue is not strictly specific to Vuetify nor Nuxt, but their integration, I'm raising this issue here.


Simplest solution to avoid this is NOT to define the composable as auto-imported one.

However, I wonder if we can figure out the cause of the circular dependency, so we can have the convenience of using auto-imported composables,

Version

1.0.2 (Default)

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Additional context

Dependencies: @invictus.codes/nuxt-vuetify: 0.2.20 nuxt: 3.5.2

jvhellemondt commented 11 months ago

Could you provide a codepen/ codesandbox with your setup? So we can take a look?