Version

3.2.30

Reproduction link

sfc.vuejs.org/

Steps to reproduce

In the following block of Typescript code, look at the type of the list variable.

import { ref } from "vue";
type DropdownOption = { value: string; name: string };
const list = ref<DropdownOption[]>([]);

What is expected?

The return type of ref<DropdownOption[]>([]) to be Ref<DropdownOption[]>.

What is actually happening?

The return type of ref<DropdownOption[]>([]) is currently Ref<{value: string, name: string}[]>.

I could be off-base here, but I think the problem statement above is the issue related to this Typescript error.

error TS2322: Type 'HTMLLIElement' is not assignable to type '{ type: string; value: number; addEventListener: { <K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLLIElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | ... 1 more ... | undefined): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | ... 1 more ... ...'.
  Types of property 'offsetParent' are incompatible.

That error does not appear in vue<=3.2.29. This is the code producing the error:

const optionElementRefs = ref<HTMLLIElement[]>([]);

// ...

const setOptionElementRef = (element: HTMLLIElement, index: number) => {
  optionElementRefs.value[index] = element;
};

That error does not appear in vue<=3.2.29. This is the code producing the error:

I can reproduce that second example with 3.2.25 at least, also 3.2.30 doesn't contain any changes that could be related.

related, I think: https://github.com/vuejs/core/pull/4807

In a project I'm working on the same issue occurred during an upgrade of only the yarn.lock file. Did some research and apparently if the version of @vue/reactivity mismatches with the pinned version of vue in the package.json it will produce this issue.

For the typescript type checking we're using vue-tsc and it seems like they have an indirect dependency on @vue/reactivity@3.2.27, thus making it possible for a mismatch upgrade in the yarn.lock file.

After bumping vue in the package.json to the same version it resolves the issue. So it seems like typescript get confused somehow when @vue/reactivity is not matching the version of other core vue packages.

Don't know if an investigation is really needed to know why a mismatch in versions result in this error, because it's supposed the version of core vue packages must be the same. But it might worth looking into if it's allowed that vue-tsc can result in such mismatch of core packages in the yarn.lock. Especially when vue-tsc is named on the vue site.

Can confirm this issue was due to a mismatch, closing, thanks!

I found the problem too, I have two questions:

1. Why a version mismatch occured?
2. Why the mismatch cause this problem?

If anyone have got the answer?