vue-tsc v2.2.0 causes Vue errors

[UglyHobbitFeet]

Vue - Official extension or vue-tsc version

2.2.0

VSCode version

1.96.2

Vue version

3.5.13

TypeScript version

5.7.2

System Info

N/A

package.json dependencies

No response

Steps to reproduce

Ever since upgrading from vue-tsc 2.1.10 to 2.2.0 I now get compile errors outside of my code. You can see below multiple errors for the same line of code. Note - That line of code does not exist in my file, so it's referring to the post compiled one. Also the errors below shown 'defineCOmponent', which is not used explicitly in my code and the only appearance of that term is in the vite-env.d.ts file (shown further below)

src/MyFile.vue:1235:1 - error TS4082: Default export of the module has or is using private name 'DataTableHeader'.

1235 export default (await import('vue')).defineComponent({
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1236 setup() {
     ~~~~~~~~~
 ... 
1241 __typeEl: {} as __VLS_TemplateResult['rootEl'],
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1242 });
     ~~~

src/MyFile.vue:1235:1 - error TS4082: Default export of the module has or is using private name 'DataTableItem'.

1235 export default (await import('vue')).defineComponent({
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1236 setup() {
     ~~~~~~~~~
 ... 
1241 __typeEl: {} as __VLS_TemplateResult['rootEl'],
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1242 });
     ~~~

src/MyFile.vue:1235:1 - error TS4082: Default export of the module has or is using private name 'DataTableItemProps'.

1235 export default (await import('vue')).defineComponent({
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1236 setup() {
     ~~~~~~~~~
 ... 
1241 __typeEl: {} as __VLS_TemplateResult['rootEl'],
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1242 });
     ~~~

src/MyFile.vue:1235:1 - error TS4082: Default export of the module has or is using private name 'Group'.

1235 export default (await import('vue')).defineComponent({
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1236 setup() {
     ~~~~~~~~~
 ... 
1241 __typeEl: {} as __VLS_TemplateResult['rootEl'],
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1242 });
     ~~~

src/MyFile.vue:1235:1 - error TS4082: Default export of the module has or is using private name 'GroupableItem'.

1235 export default (await import('vue')).defineComponent({
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1236 setup() {
     ~~~~~~~~~
 ... 
1241 __typeEl: {} as __VLS_TemplateResult['rootEl'],
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1242 });
     ~~~

src/MyFile.vue:1235:1 - error TS4082: Default export of the module has or is using private name 'InternalItem'.

1235 export default (await import('vue')).defineComponent({
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1236 setup() {
     ~~~~~~~~~
 ... 
1241 __typeEl: {} as __VLS_TemplateResult['rootEl'],
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1242 });
     ~~~

src/MyFile.vue:1235:1 - error TS4082: Default export of the module has or is using private name 'LoaderSlotProps'.

1235 export default (await import('vue')).defineComponent({
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1236 setup() {
     ~~~~~~~~~
 ... 
1241 __typeEl: {} as __VLS_TemplateResult['rootEl'],
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1242 });
     ~~~

src/MyFile.vue:1235:1 - error TS4082: Default export of the module has or is using private name 'SelectableItem'.

1235 export default (await import('vue')).defineComponent({
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1236 setup() {
     ~~~~~~~~~
 ... 
1241 __typeEl: {} as __VLS_TemplateResult['rootEl'],
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1242 });
     ~~~

src/MyFile.vue:1235:1 - error TS7056: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.

1235 export default (await import('vue')).defineComponent({
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1236 setup() {
     ~~~~~~~~~
 ... 
1241 __typeEl: {} as __VLS_TemplateResult['rootEl'],
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1242 });

What is expected?

Not to get the errors shown above upon compile

What is actually happening?

I'm getting the errors shown above

Link to minimal reproduction

No response

Any additional comments?

FWIW I'm using the standard vite-env.d.ts

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-empty-object-type
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

[RayGuo-ergou]

This has nothing to do with DefineComponent. To generate declaration file, vue-tsc has to convert vue file into ts file.

Your errors are:

error TS4082: Default export of the module has or is using private name 'DataTableHeader'.
error TS4082: Default export of the module has or is using private name 'Group'.
...

[UglyHobbitFeet]

Hi, thanks for your response!

I believe 'DataTableHeader/Group' comes directly from Vuetify source code, so I'm not sure it's anything I'm doing. I use Vuetify v3.7.6 and I followed the answer here (https://stackoverflow.com/a/75993081) to help expose the Vuetify table headers (shown below).

I created a file named: '@/types/vuetifyTableTypes.d';

import type { VDataTable } from 'vuetify/components'

type ReadonlyHeaders = VDataTable['$props']['headers']
type UnwrapReadonlyArray<A> = A extends Readonly<Array<infer I>> ? I : never;
export type ReadonlyDataTableHeader = UnwrapReadonlyArray<ReadonlyHeaders>;

Which gets called like:

import * as VTableTypes from '@/types/vuetifyTableTypes.d';
const headers: Ref<VTableTypes.ReadonlyDataTableHeader[]> = ref([{
    align: 'start',
    key: 'someKey',
    sortable: true,
    title: 'someTitle'
}]);

If that was the culprit, I assume I would get an error message for every vue file that imports the VTableTypes, but I don't. So I'm not sure where to go from here.

[RayGuo-ergou]

Can you share a minimal reproduction?
I cannot reproduce with Vuetify. with

    "noEmit": false,
    "outDir": "./dist",

I can see the declaration file correctly generated.

And I checked vuetify's type declaration file, this type is exported.

[UglyHobbitFeet]

After some trial and error, I think I see what is going on now.
This error seems to occur if a tag has an orphaned ref.

Example:
<v-data-table-server ref="someNonexistantRef" />

Removing the ref (or pointing it to a real one) resolves the issue.

Perhaps there can be a single, clearer, error message that the ref doesnt exist or is of wrong type instead of the multiple errors shown in the original ticket?

Thanks!