__VLS_globalComponents type error

[zcf0508]

Vue - Official extension or vue-tsc version

2.1.2

VSCode version

1.93.0-insider

Vue version

3.4.21

TypeScript version

5.5.4

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 830.18 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/.version-fox/temp/1724860800-20731/nodejs/bin/node
    npm: 8.19.3 - ~/.version-fox/temp/1724860800-20731/nodejs/bin/npm
    pnpm: 8.15.8 - ~/.version-fox/temp/1724860800-20731/nodejs/bin/pnpm
    bun: 1.1.25 - ~/.bun/bin/bun
  Browsers:
    Chrome: 128.0.6613.86
    Edge: 128.0.2739.42
    Safari: 17.2.1

Steps to reproduce

In a large project, the global component type is inferred as any.

This is the components list:

What is expected?

The __VLS_globalComponents type should be inferred correctly.

What is actually happening?

In a large project, the global component type is inferred as any.

Link to minimal reproduction

No response

Any additional comments?

No response

[juanparati]

I am also facing the same issue after upgrade to 2.1.2, however it works perfect with 2.1.0.

I also I experience an higher memory consumption that in some of my linux servers overpassing the maximum memory heap capacity raised by NodeJS.

I tested in two different environments:

Mac Os Sonoma 14.6.1 (Darwin Kernel Version 23.6.0 aarch64)
node: v20.12.2
vue-tsc: 2.1.2
vue: 3.4.38
vite: 5.4.2
tsc: 5.5.4

Linux Debian 12 Bookworm (6.1.0-18-cloud-arm64)
node: v20.17.0
vue-tsc: 2.1.2
vue: 3.4.38
vite: 5.4.2
tsc: 5.5.4

[KazariEX]

Could you provide a minimal reproduction?

[juanparati]

@zcf0508 : Can you try if it works with vue-tsc 2.1.0?

[juanparati]

Steps to reproduce

1. Upgrade to vue-tsc: 2.1.2
2. Run npm run build

Expected result:

• Components successfully found and transpiled

Received result:

• Components properties are not found or infered (__VLS_WithComponent) . Example:

resources/js/Pages/Settings/Concepts/ConceptsList.vue:70:4 - error TS2339: Property 'ContentBody' does not exist on type 'Required<{} & __VLS_WithComponent<"ContentTitle", { AccordionTab: GlobalComponentConstructor<AccordionTab>; Accordion: GlobalComponentConstructor<Accordion>; ... 97 more ...; Teleport: { ...; }; } & this, "ContentTitle", "ContentTitle", "ContentTitle"> & ... 5 more ... & __VLS_WithComponent<...>>'.

70   <ContentBody ref="rfnContentBody">
      ~~~~~~~~~~~

resources/js/Pages/Settings/Concepts/ConceptsList.vue:73:8 - error TS2339: Property 'DataTable' does not exist on type 'Required<{} & __VLS_WithComponent<"ContentTitle", { AccordionTab: GlobalComponentConstructor<AccordionTab>; Accordion: GlobalComponentConstructor<Accordion>; ... 97 more ...; Teleport: { ...; }; } & this, "ContentTitle", "ContentTitle", "ContentTitle"> & ... 5 more ... & __VLS_WithComponent<...>>'.

73       <DataTable ref="datatable"
          ~~~~~~~~~

Workaround:

• Downgrade to vue-tsc: 2.1.0

Environment
Mac Os Sonoma 14.6.1 (Darwin Kernel Version 23.6.0 aarch64)
node: v20.12.2
vue-tsc: 2.1.2
vue: 3.4.38
vite: 5.4.2
tsc: 5.5.4

My projects has more than 50 components.

[davidmatter]

How have you defined your global components? Please post your declaration file here (containing just one component entry), e.g.:

import {default as Test} from './Test.vue'

export {}

declare module 'vue' {
  export interface GlobalComponents {
    Test: typeof Test
  }
}

[davidmatter]

Are you using vue-facing-decorator by any chance?

[zcf0508]

@KazariEX minimal reproduction

WithRefAndWithSlot.vue

[KazariEX]

Confirmed. This is because #4644 introduces a large circular reference into the virtual code.

[zcf0508]

type aaa1 = {
	[K in typeof __VLS_name]: typeof __VLS_internalComponent
		& (new () => {
			$slots: typeof __VLS_slots
		})
}
type aaa2 = typeof __VLS_internalComponent extends { components: infer C } ? C : {}

type aaa3 = __VLS_GlobalComponents

type aaa4 = typeof __VLS_ctx

// This type is right
const __VLS_components1 = {} as aaa1 & aaa2 & aaa3 & aaa4;

// This type is wrong
const __VLS_components = {
	...{} as {
				[K in typeof __VLS_name]: typeof __VLS_internalComponent
					& (new () => {
						$slots: typeof __VLS_slots
					})
			},
	...{} as NonNullable<typeof __VLS_internalComponent extends { components: infer C } ? C : {}>,
	...{} as __VLS_GlobalComponents,
	...{} as typeof __VLS_ctx,
	};

[zcf0508]

I need change the global type

from const __VLS_globalComponents = { ... {} as import('vue').GlobalComponents}

to const __VLS_globalComponents = {} as import('vue').GlobalComponents in __globalTypes_3.4_false.d.ts file,

otherwise the __VLS_globalComponents will always be any.

[KazariEX]

You are right, this is a issue also.

[juanparati]

@davidmatter : Yes I am using the vue-facing-decorator.

[juanparati]

Confirmed. This is because #4644 introduces a large circular reference into the virtual code.

That can explain the increase of memory usage.