Subscribe on changes!

Compilation error with Vue 3, TypeScript, and Composition API

avatar
Oct 10th 2021

Version

3.2.19

Reproduction link

https://pastebin.com/0eQjikN3

Steps to reproduce

Try and compile the linked single-file component.

What is expected?

It to compile successfully.

What is actually happening?

Compilation fails with the following error:

[tsl] ERROR in /tmp/build_773064f9/resources/ts/components/WrestlersInput.vue.ts(53,7)
      TS2322: Type '[ModelDirective<HTMLInputElement | HTMLTextAreaElement>, any, undefined, { trim: true; }]' is not assignable to type '[Directive<any, any>] | [Directive<any, any>, any] | [Directive<any, any>, any, string] | [Directive<any, any>, any, string, DirectiveModifiers]'.
  Type '[ModelDirective<HTMLInputElement | HTMLTextAreaElement>, any, undefined, { trim: true; }]' is not assignable to type '[Directive<any, any>, any, string, DirectiveModifiers]'.
    Type at position 2 in source is not compatible with type at position 2 in target.
      Type 'undefined' is not assignable to type 'string'.

Which I can’t really make heads of tails of what it’s complaining about. I see it references “model” and “trim”, but the only place I’m using v-model.trim, I’m giving it a string (the name from my form object which is a string and not a string or undefined or null or any other type; it’s literally just a string type and nothing else).

avatar
Oct 10th 2021

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

Also, you should read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug.

avatar
Oct 10th 2021

@posva Pretty sure being unable to compile with what looks like perfectly-valid Vue code is a bug. Feel free to explain how this isn’t a bug, though…

avatar
Nov 11th 2021

I'm having this issue with Vue 3.1.4, Typescript and the Options API. @martinbean did you find a way around this? It has been (seemingly) randomly showing up in my builds.

avatar
Nov 11th 2021

@sixpeteunder Unfortunately not. But, y’know, valid Vue components not compiling is apparently not a bug, so… 🤷‍♂️