Open JuroOravec opened 1 year ago
In Nuxt3, I define an auto-imported composable (in composables folder) that imports Vuetify component types, like so:
composables
// ./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:
npx nuxt prepare
'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.
VDialog
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,
1.0.2 (Default)
Chrome
No response
Dependencies: @invictus.codes/nuxt-vuetify: 0.2.20 nuxt: 3.5.2
Could you provide a codepen/ codesandbox with your setup? So we can take a look?
What happened?
In Nuxt3, I define an auto-imported composable (in
composables
folder) that imports Vuetify component types, like so:When the nuxt types are generated (with
npx nuxt prepare
), I start getting TypeScript errors about circular dependency:My Nuxt config is like this:
I wonder how it is possible that the type
VDialog
references the auto-imported composableuseComposable
.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