Nuxt built-in and auto imported components typed as unknown

[ThomasBerne]

I use nuxt 3 and Vue Official 2.X+

Built-in and auto imported components are typed as unknown :

Even though they are in the .nuxt/components.d.ts

Imported by the .nuxt/tsconfig.json

.nuxt/tsconfig.json extended by my project tsconfig.json

[johnsoncodehk]

1. Are you using 2.0.7?
2. If yes, is Hybrid Mode enabled?

[ThomasBerne]

I have tried using. 2.6, 2.7 and insider versions. What is the hybrid mode ? I don't think I use It. I'm all on vue 3.

[so1ve]

I can confirm this issue with a fresh nuxt content starter. MarkdownXXX components' type are unknown.

[ThomasBerne]

Thank you @so1ve I tried a reproduction with a fresh nuxt 3 install but it works like a charm.

[johnsoncodehk]

Hybrid Mode is an option to improve language server performance.

When enabled, it may cause the problem you asked because tsserver selects a different tsconfig for .vue.

FYI: microsoft/TypeScript#57632

[ThomasBerne]

Activating or deactivating the hybrid mode doesn't change anything on my side.

[ThomasBerne]

I found the problem! It's related to nuxt-typed-router.

when removing this line in the .nuxt/tsconfig.json

Everything works fine.

[johnsoncodehk]

@ThomasBerne I tried using nuxt-typed-router with a newly created project but could not reproduce the problem, can you see if there is any difference?

reproduction: https://github.com/johnsoncodehk/issue-4170-repro

[ThomasBerneHCSE]

Indeed i cannot reproduce either with only the nuxt typed router package. This must be a collision of nuxt packages I guess. I'll try to reproduce it.

[ThomasBerneHCSE]

I successfully reproduced adding vuetify and nuxt typed router to a clear nuxt install :
https://github.com/ThomasBerneHCSE/issue-4170-repro

I used npm as the default package manager.

[ThomasBerneHCSE]

You can see the problem in the pages/[id]/index.vue

[johnsoncodehk]

I tried locally and in Codespace but couldn't reproduce (using npm).

[ThomasBerneHCSE]

VApp exists. It has to problems sorry. But the Test component is marked as unknown

[ThomasBerneHCSE]

Like if vuetify was overwriting GlobalComponents definition. But only when it is installed alongside of the nuxt-typed-router package.

[johnsoncodehk]

Confirmed. 👍

[johnsoncodehk]

I think this problem needs to be solved by Nuxt, currently Nuxt generates GlobalComponents as:

declare module 'vue' {
	export interface GlobalComponents {
		Test: (typeof import('../components/Test.vue'))['default'];
	}
}

To avoid types being overwritten in the npm node_modules structure, it should probably be generated as:

interface _GlobalComponents {
	Test: (typeof import('../components/Test.vue'))['default'];
}

declare module '@vue/runtime-core' {
	export interface GlobalComponents extends _GlobalComponents { };
}

declare module '@vue/runtime-dom' {
	export interface GlobalComponents extends _GlobalComponents { };
}

declare module 'vue' {
	export interface GlobalComponents extends _GlobalComponents { };
}

@danielroe can you or someone take up this issue? Thanks.