Importing vue-slider-component using TS Loader is throwing errors

[djphan]

Describe the bug

I'm trying to import the vue-slider component from the /libs/ directory directly into a vue component I'm creating. I was hoping to use ts-loader to resolve the import with webpack. I am getting several errors doing so such as:

TS1238: Unable to resolve signature of class decorator when called as an expression. Type '<VC extends unknown>(target: VC) => VC' is not assignable to type 'typeof VueSlideMark'. Type '<VC extends unknown>(target: VC) => VC' provides no match for the signature 'new (): VueSlideMark'.

Property '$emit' does not exist on type 'VueSlideMark'.

TS1238: Unable to resolve signature of class decorator when called as an expression. Type '<VC extends unknown>(target: VC) => VC' is not assignable to type 'typeof VueSliderDot'. Type '<VC extends unknown>(target: VC) => VC' provides no match for the signature 'new (): VueSliderDot'.

Additional context (If there is no relevant content, please delete the block)

Ideally I like to include the vue slider in my vue file with the Import VueSlider from '../..'. I am not in a usual node project that can support the global reference used in the docs. I have gotten this to work using the inline script method but was hoping if there were other people who tried transpiling the ts files to use in my own project.

Environment (If you feel unrelated, please delete the block)

• OS & Version: Mac
• Vue version: v2.6
• Component Version: 3.2.2

[NightCatSama]

It seems to be an incompatible error of vue-class-component.

You can refer to:
vuejs/vue-class-component#294
https://stackoverflow.com/questions/47100589/how-use-vue-js-component-with-typescript-2-6-1

[djphan]

The helped resolve some errors but it looks like some of the built in Vue methods are still triggering errors like:

/node_modules/vue-slider-component/lib/vue-slider.tsx(621,12) TS2339: Property '$emit' does not exist on type 'VueSlider'.

Just going over the Vue docs it looks like the library might need to define the types of these built ins? https://vuejs.org/v2/guide/typescript.html

Or there needs to be typing that needs to be annotated at least.

I see that there is another issue to track effort for Vue 3 and that work might help clean some of these errors if we are loading typescript loader for our projects.

[NightCatSama]

How do you use components?

I tried it without error:

[djphan]

Hi and apologies for the really late reply. I'm trying to import where from has my path to one of the type script files. e.g Import VueSlider from '../path/to/vue-slider/libs/index.ts' for example. I've tried both index.ts and vue-slider.ts.

The reason I prefer to import direct from the file is that the root directory of my project isn't where I specify Vue Slider Component. I install a common library that manages all my vue components (just working within the constraints of my work repo organization).

Now this might not be ideal but I'm constrained with the existing code organization at the moment.

[NightCatSama]

https://stackoverflow.com/questions/47100589/how-use-vue-js-component-with-typescript-2-6-1#answer-47102704

Have you tried the solution from this answer?

  strictFunctionTypes: false