Error due to type signature mismatch of defineModel() / useModel()

[pixelistik]

I use defineModel() in a component.

<script setup lang="ts">
type Option = {
  key: string;
  value: any;
};
const selectedValue = defineModel<Option>("selectedValue");

But during webpack bundling, I get the TypeScript error TS2558: Expected 3 type arguments, but got 1.

What seems to be happening is this:

defineModel() is a Vue SFC compiler macro, which generates a call to the useModel() function, as we can see in the test cases for the compiler.

So defineModel<T> becomes useModel<T> after the macro is expanded.

But the useModel() function actually has 3 type parameters, not only <T>, as we can see in the code (distributed as @vue/runtime-core/dist/runtime-core.d.ts):

useModel<
  M extends string | number | symbol,
  T extends Record<string, any>,
  K extends keyof T,
>( //...

So the error message seems to make sense. But the problem is not reproducable in the Vue Playground.

How do I fix this? Is webpack somehow looking at the wrong type definitions? Is this a bug in Vue?

[LinusBorg]

Your build setup is type checking the generated render function code, which it should not do. Templates are converted to Javascript, not Typescript.

What's your setup? I

[pixelistik]

We are using Webpack with ts-loader and vue-loader. I will try to reduce it to a minimal reproduction.

But my understanding of the process is:

1. vue-loader: extracts the <script> part of the SFC, then expands the compiler macros (this is not about the <template> part)
2. ts-loader: checks types and transpiles to JS.

And it sure looks like the SFC compiler macros do output TypeScript, if you look at the test cases from the Vue repository that I linked above. The same if happening in my setup. If I dump the output of vue-loader via console.log(), then I can see that it outputs TypeScript:

export default /*#__PURE__*/_defineComponent({
  __name: 'AppDropdown',
  props: /*#__PURE__*/_mergeModels({
    options: {},
  }, {
    "selectedValue": {},
    "selectedValueModifiers": {},
  }),
  emits: ["update:selectedValue"],
  setup(__props: any) {

const selectedValue = _useModel<Option>(__props, "selectedValue");

which contains the problematic _useModel<Option>(__props, "selectedValue");.

[pixelistik]

I have uploaded a cleaned-up version of our project, which still reproduces the error: https://github.com/pixelistik/reproduce-vue-typescript-macro-error

Do you see any incorrect type checking configured here?

[LinusBorg]

set ts-loader to transpileOnly: trueand use the official Vue language Tools (vue-tsc) to typecheck.

https://vuejs.org/guide/typescript/overview.html#note-on-vue-cli-and-ts-loader

[pixelistik]

This worked for us, thank you!