Compilation error with Vue 3, TypeScript, and Composition API
Version
3.2.19
Reproduction link
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).
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.
@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…
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.