pqina / vue-filepond

🔌 A handy FilePond adapter component for Vue
https://pqina.nl/filepond
MIT License
1.94k stars 128 forks source link

Found 2 errors: typeof is not a constructor function type (Vue 3 + vue-tsc) #221

Open natemate90 opened 3 years ago

natemate90 commented 3 years ago

Describe the bug Getting the following error on build vue-tsc --noEmit

node_modules/vue-filepond/types/index.d.ts:26:43 - error TS2507: Type 'typeof import("d:/Project/src/App/node_modules/vue/dist/vue")' is not a constructor function type.

26 export class VueFilePondComponent extends VueConstructor<VueFilePondInstanceMethods>{ }
                                             ~~~~~~~~~~~~~~

node_modules/vue-filepond/types/index.d.ts:28:106 - error TS2344: Type 'VueFilepondProps' does not satisfy the constraint 'ComputedOptions'.
  Property 'required' is incompatible with index signature.
    Type 'boolean' is not assignable to type 'ComputedGetter<any> | WritableComputedOptions<any>'.

28 declare const VueFilePond: (...plugins: any[]) => ComponentOptions<any, VueFilePondInstanceMethods, any, VueFilepondProps>

Logs No logs available except above error message.

To Reproduce vue-tsc --noEmit

Expected behavior It should not generate any errors.

Information about your project:

    "filepond": "^4.29.1",
    "filepond-plugin-file-validate-type": "^1.2.6",
    "vue": "^3.2.2",
    "vue-tsc": "^0.3.0",
    "vue-filepond": "^7.0.0",
    "typescript": "^4.3.5"
rikschennink commented 3 years ago

Thanks for reporting. Looking into it as soon as possible, in the mean time, if you have any suggestions I'm all ears. : )

natemate90 commented 3 years ago

It might be a vue-tsc specific problem or a general problem, I don't know at this point. Anyways, I'm doing a temporary workaround now; I'll basically disabled vue-filepond's type declaration file by declaring a module in file Project/src/node_modules/vue-filepond/index.d.ts:

declare module 'vue-filepond'

inside my Fileupload.vue component, I'm importing it then like this:

import { Component } from 'vue'
import vueFilePond from 'vue-filepond'

import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size'

const FilepondComponent = vueFilePond(
  FilePondPluginFileValidateType,
  FilePondPluginFileValidateSize
) as Component

I'd still prefer a typed solution but the problem is less urgent now.

Thanks @rikschennink for your work

rikschennink commented 3 years ago

@natemate90 Glad to hear you found a workaround. Tried to find a solution but wasn't successful, I'll look into it further when I have some time.

If anyone else has an idea I'm all ears : )

productdevbook commented 2 years ago
as Component
CleanShot 2021-12-10 at 18 18 26@2x

some :/

JuliusSettili commented 2 years ago

Set "skipLibCkeck": true in tsconfig.json also is a workaround.