Not supported for Vue3 with TypeScript (error at build time)

[pommedepain]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @vueform/multiselect@2.5.2 for the project I'm working on.

I was having errors at build time Type 'typeof import("blabla")' is not a constructor function type..
Seems to be a recurring problem for persons using Vue 3 (I saw the issues 142 and 58 and 83).

Here is the diff that solved my problem:

diff --git a/node_modules/@vueform/multiselect/src/Multiselect.d.ts b/node_modules/@vueform/multiselect/src/Multiselect.d.ts
index 2e0c94d..ae54c4b 100644
--- a/node_modules/@vueform/multiselect/src/Multiselect.d.ts
+++ b/node_modules/@vueform/multiselect/src/Multiselect.d.ts
@@ -1,15 +1,15 @@
-import Vue,{ VNode } from 'vue';
+import { VNode, defineComponent } from "vue";
 
-declare class Multiselect extends Vue {
+declare class Multiselect implements ReturnType<typeof defineComponent> {
   modelValue?: any;
   value?: any;
-  mode: 'single'|'multiple'|'tags';
+  mode: "single" | "multiple" | "tags";
   options?: any[];
   searchable?: boolean;
   valueProp?: string;
   trackBy?: string;
   label?: string;
-  placeholder?: string|null;
+  placeholder?: string | null;
   multipleLabel?: any; // Function
   disabled?: boolean;
   max?: number;
@@ -17,7 +17,7 @@ declare class Multiselect extends Vue {
   loading?: boolean;
   id?: string;
   caret?: boolean;
-  maxHeight?: string|number;
+  maxHeight?: string | number;
   noOptionsText?: string;
   noResultsText?: string;
   canDeselect?: boolean;
@@ -38,18 +38,18 @@ declare class Multiselect extends Vue {
   showOptions?: boolean;
   object?: boolean;
   required?: boolean;
-  openDirection?: 'top'|'bottom';
+  openDirection?: "top" | "bottom";
   nativeSupport?: boolean;
   classes?: object;
   strict?: boolean;
   closeOnSelect?: boolean;
   autocomplete?: string;
-  groups?: boolean;
-  groupLabel?: string;
-  groupOptions?: string;
-  groupHideEmpty?: boolean;
-  groupSelect?: boolean;
-  inputType?: string;
+  groups: boolean;
+  groupLabel: string;
+  groupOptions: string;
+  groupHideEmpty: boolean;
+  groupSelect: boolean;
+  inputType: string;
   attrs?: object;
   onCreate?: Function;
   searchStart?: boolean;
@@ -58,19 +58,19 @@ declare class Multiselect extends Vue {
   rtl?: boolean;
   infinite?: boolean;
 
-  $emit(eventName: 'change', e: {originalEvent: Event, value: any}): this;
-  $emit(eventName: 'select', e: {originalEvent: Event, value: any, option: any}): this;
-  $emit(eventName: 'deselect', e: {originalEvent: Event, value: any, option: any}): this;
-  $emit(eventName: 'remove', e: {originalEvent: Event, value: any, option: any}): this;
-  $emit(eventName: 'search-change', e: {originalEvent: Event, query: string}): this;
-  $emit(eventName: 'tag', e: {originalEvent: Event, query: string}): this;
-  $emit(eventName: 'option', e: {originalEvent: Event, query: string}): this;
-  $emit(eventName: 'paste', e: {originalEvent: Event}): this;
-  $emit(eventName: 'keydown', e: {originalEvent: Event}): this;
-  $emit(eventName: 'keyup', e: {originalEvent: Event}): this;
-  $emit(eventName: 'open'): this;
-  $emit(eventName: 'close'): this;
-  $emit(eventName: 'clear'): this;
+  $emit(eventName: "change", e: { originalEvent: Event; value: any }): this;
+	$emit(eventName: "select", e: { originalEvent: Event; value: any; option: any }): this;
+	$emit(eventName: "deselect", e: { originalEvent: Event; value: any; option: any }): this;
+	$emit(eventName: "remove", e: { originalEvent: Event; value: any; option: any }): this;
+	$emit(eventName: "search-change", e: { originalEvent: Event; query: string }): this;
+	$emit(eventName: "tag", e: { originalEvent: Event; query: string }): this;
+	$emit(eventName: "option", e: { originalEvent: Event; query: string }): this;
+	$emit(eventName: "paste", e: { originalEvent: Event }): this;
+	$emit(eventName: "open"): this;
+	$emit(eventName: "close"): this;
+	$emit(eventName: "clear"): this;
+  $emit(eventName: "keydown", e: { originalEvent: Event }): this;
+  $emit(eventName: "keyup", e: { originalEvent: Event }): this;
 
   $slots: {
     placeholder: VNode[];

This issue body was partially generated by patch-package.

[eme11]

This issue, is happening also for the @vueform\slider component

[adamberecz]

This should be fixed with the upcoming release. If not, feel free to reopen.