Could not find a declaration file for module 'svelte-progress-bar'

[rohankvashisht]

When I am using this component in Svelte Kit Framework, VS Code shows a little problem on this line: import ProgressBar from 'svelte-progress-bar'

On hover, it says:

Could not find a declaration file for module 'svelte-progress-bar'. '/Users/xxxxx/Documents/portfolio-xxxxx-frontend/node_modules/svelte-progress-bar/dist/ProgressBar.cjs.js' implicitly has an 'any' type.

Here's the screenshot 👇🏼

[saibotsivad]

It looks like maybe you are using TypeScript?

I haven't converted any components to TS yet, so I'm not familiar with what's involved.

Do you have a link to a Svelte component that includes type declarations, so I could get an example?

Alternately, I would accept a pull request to add TS declarations!

[rohankvashisht]

It looks like maybe you are using TypeScript?

I haven't converted any components to TS yet, so I'm not familiar with what's involved.

Do you have a link to a Svelte component that includes type declarations, so I could get an example?

Alternately, I would accept a pull request to add TS declarations!

Hey man, Sorry I don't have links to Svelte component that includes type declarations. I don't have much experience with JS, so can't help. I am using standard Svelte packages with VS Code, nothing out of ordinary.

[theetrain]

Here's a tool that could help: https://github.com/carbon-design-system/sveld

It can analyze the ProgressBar.svelte and produce a ProgressBar.d.ts declaration file for you, this way you'll have type definitions and won't have to rewrite the component in Typescript.

[YuukanOO]

In the meantime, you could define a src/declarations.d.ts file and put the necessary stuff in there:

declare module 'svelte-progress-bar' {
    import type { SvelteComponentTyped } from 'svelte';

    export default class ProgressBar extends SvelteComponentTyped<{
        color: string;
        width: number;
        // Other props as you need it
    }> {
        public start(): void;
        public complete(): void;
        // Other funcs as you need it
    }
}

And now it won't complain in your svelte typed components:

<script lang="ts">
    import { navigating } from '$app/stores';
    import ProgressBar from 'svelte-progress-bar';

    let progress: ProgressBar | undefined;

    $: $navigating ? progress?.start() : progress?.complete();
</script>

<ProgressBar color="pink" width={0} bind:this={progress} />
<slot />

[saibotsivad]

@YuukanOO thanks for this! Presumably I would also need to add that to the package.json file? e.g.

{
  "types": "src/declarations.d.ts"
}

[YuukanOO]

My comment was made for a consumer of this lib. For you, the best choice is probably to convert your svelte component to typescript (should be easy) and to expose its type. But I don't know how to do it personally.