After updating PrimeVue 4.1.1, typescript errors began to occur

[SchwarzesWasser]

Describe the bug

Since version 4.1.1, many TS errors have appeared in my project. The example from stackblitz does not output type errors when executing the npm run type-check command. But there are a lot of errors in the IDE, for example:

src/components/form/LocalSelect/LocalSelect.vue:260:40 - error TS2339: Property '$el' does not exist on type '{ $props: SelectProps & VNodeProps & AllowedComponentProps & ComponentCustomProps; $slots: SelectSlots; $emit: ((e: "filter", event: SelectFilterEvent) => void) & ... 7 more ... & ((e: "change", event: SelectChangeEvent) => void); }'.

const tempRef = localSelectRef.value.$el.querySelector('.p-multiselect-label-container');


src/components/form/LocalSelect/LocalSelect.vue:266:35 - error TS2339: Property 'overlayVisible' does not exist on type '{ $props: SelectProps & VNodeProps & AllowedComponentProps & ComponentCustomProps; $slots: SelectSlots; $emit: ((e: "filter", event: SelectFilterEvent) => void) & ... 7 more ... & ((e: "change", event: SelectChangeEvent) => void); }'.

watch(() => localSelectRef.value?.overlayVisible, (newValue) => {

src/components/form/LocalSelect/LocalSelect.vue:275:70 - error TS2339: Property '$el' does not exist on type '{ $props: SelectProps & VNodeProps & AllowedComponentProps & ComponentCustomProps; $slots: SelectSlots; $emit: ((e: "filter", event: SelectFilterEvent) => void) & ... 7 more ... & ((e: "change", event: SelectChangeEvent) => void); }'.

if (props.isFilter && localSelectRef.value && !localSelectRef.value.$el.contains(event.target)) {

And there are quite a lot of such errors in different PrimeVue controls. For example, upload() and choose() methods no longer exist in the FileUpload component in template ref. Vue: Property upload does not exist on type.

Could there be a problem updating the definition of controls? Everything worked fine before version 4.1.1

Is this a PrimeVue bug or should I work with types in some other way?

Reproducer

https://stackblitz.com/edit/primevue-4-ts-vite-issue-template-23calj?file=src%2FApp.vue

PrimeVue version

4.1.1

Vue version

4.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[gerardmrk]

Also getting many type errors on v4.2.1 (no problems prior), e.g.:

this.$toast.add({ /* ... */ });
> Property '$toast' does not exist on type 'CreateComponentPublicInstance<...'.

(this.$refs[`toolbarmobilemenu`] as typeof MenuX).toggle(e);
> Property 'toggle' does not exist on type 'DefineComponent<MenuProps, MenuSlots, ((e: "focus", event: Event) => void) & ((e: "blur", event: Event) => void), MenuMethods>'.

(this.$refs[`tablesettings`] as typeof Popover).hide();
> Property 'hide' does not exist on type 'DefineComponent<PopoverProps, PopoverSlots, ((e: "show") => void) & ((e: "hide") => void), PopoverMethods>'.

[SchwarzesWasser]

Any ideas?

[micodev]

same

[SchwarzesWasser]

import { useTemplateRef, watch } from 'vue';
import AutoComplete, { type AutoCompleteCompleteEvent } from 'primevue/autocomplete';

const input = useTemplateRef<InstanceType<typeof AutoComplete>>('input');

watch(() => input.value?.overlayVisible, () => { ... });

And TS: Property 'overlayVisible' does not exist on type '{ $props: AutoCompleteProps & VNodeProps & AllowedComponentProps & ComponentCustomProps; $slots: AutoCompleteSlots; $emit: ((e: "update:modelValue", value: any) => void) & ... 14 more ... & ((e: "hide") => void); }'.ts(2339)

Another example

import Select from 'primevue/select';
const localSelectRef = useTemplateRef<InstanceType<typeof Select>>('localSelectRef');
...
const overlay = localSelectRef.value?.overlay

And TS: Property 'overlay' does not exist on type '{ $props: SelectProps & VNodeProps & AllowedComponentProps & ComponentCustomProps; $slots: SelectSlots; $emit: ((e: "filter", event: SelectFilterEvent) => void) & ... 8 more ... & ((e: "hide") => void); } & SelectMethods'.ts(2339)

And i cant get $el from ref localSelectRef.value.$el

Property '$el' does not exist on type '{ $props: SelectProps & VNodeProps & AllowedComponentProps & ComponentCustomProps; $slots: SelectSlots; $emit: ((e: "filter", event: SelectFilterEvent) => void) & ... 8 more ... & ((e: "hide") => void); } & SelectMethods'.ts(2339)

PrimeVue: 4.3.1.

Is this a bug, improper use of useTemplateRef, or incomplete typing in the DefineComponent type? Should we specify the any type to avoid TypeScript errors and manually check components after every update to prevent breakage? This bug has been lingering for a while, and we’d really like some clarity. Thank you.

[msladek]

From [email protected] onwards I'm also getting the error Property '$el' does not exist on type ... for instances acquired by useTemplateRef, e.g.:

const input = useTemplateRef<PrimeComponentInstance<typeof InputNumber>>('input');
watch(input, (input) => input?.$el?.focus());

For me, this did not occur with [email protected] or before, so any of these may contribute to the issue described: https://github.com/vuejs/core/blob/main/CHANGELOG.md#3515-2025-05-26

[email protected]