Typescript error - Object is unknown when calling on:"event" for external library child component that is JS

[MDoder97]

Describe the bug

This is a similar error as this closed issue - #396
I think the only difference is that the plainJS component is used in that one.
I've tried in multiple ways to recreate how the person who opened that one has solved it but to no avail.
I have a Svelte Material UI Slider

I import it like this

import Slider from '@smui/slider/bare.js';

this is the problematic line - <Slider on:volume-changed={event => changeTrackVolume(event, track)}/>

If i add in my types.d.ts

declare module '@smui/slider/bare.js' {
    export class Slider {
        $$prop_def: any;
        $on: any;
    }
}

Object is of type 'unknown'.ts(2571)
Argument of type 'typeof import("@smui/slider/bare.js")' is not assignable to parameter of type 'AConstructorTypeOf<unknown>'.
  Type 'typeof import("@smui/slider/bare.js")' provides no match for the signature 'new (...args: any[]): unknown'.ts(2345)

JSX element type 'Slider' does not have any construct or call signatures.ts(2604)

These are the errors i'm getting.
I have also tried with @smui/slider etc. and export default Slider, nothing worked so far.

I'd appreciate if someone could cue me in.

Thanks.

[jasonlyu123]

you can try adding constructor to the Slider class definition

[dummdidumm]

declare module '@smui/slider' {
  export default class Slider {
    $$prop_def: any;
    $on: any;
  }
}

then import like
import Slider from '@smui/slider';
works for me.

If that doesn't fix it, could you post a reproducible code snippet+step-by-step or a repo?

[MDoder97]

@dummdidumm that worked lol, that's probably about the only thing i didn't try, so elusive.

Thanks alot!