Typescript Issues in Svelte

[gchartier]

I freshly installed and am getting an error on the Pane component:

Argument of type 'typeof Pane' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent'. Types of construct signatures are incompatible. Type 'new (options: ComponentConstructorOptions<{ size?: number | null | undefined; minSize?: number | undefined; maxSize?: number | undefined; snapSize?: number | undefined; class?: string | undefined; }>) => Pane' is not assignable to type 'new (args: { target: any; props?: any; }) => ATypedSvelteComponent'. Construct signature return types 'Pane' and 'ATypedSvelteComponent' are incompatible. The types of '$on' are incompatible between these types. Type '(type: K, callback: (e: {}[K]) => void) => () => void' is not assignable to type '(event: string, handler: ((e: any) => any) | null | undefined) => () => void'. Types of parameters 'callback' and 'handler' are incompatible. Type '((e: any) => any) | null | undefined' is not assignable to type '(e: never) => void'. Type 'undefined' is not assignable to type '(e: never) => void'.

Possible causes:

• You use the instance type of a component where you should use the constructor type
• Type definitions are missing for this Svelte Component. If you are using Svelte 3.31+, use SvelteComponentTyped to add a definition: import type { SvelteComponentTyped } from "svelte"; class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {}ts(2345)

[orefalo]

Hi @gchartier, Mind sharing more details about your implementation or creating a REPL?

I cannot reproduce, this example works fine -> https://svelte.dev/repl/1e96cbd4bcd148e3b85a4c8ca76d7309?version=4.1.2

Thank you

[orefalo]

Are you using Svelte 4?

[Tal500]

Hi @gchartier, Mind sharing more details about your implementation or creating a REPL?

I cannot reproduce, this example works fine -> https://svelte.dev/repl/1e96cbd4bcd148e3b85a4c8ca76d7309?version=4.1.2

Thank you

I think you cannot reproduce it on REPL since it's ignoring typescript completely there.

[orefalo]

Good point,

I just updated the repo example/ folder to the latest dependencies (including svelte 4) it's a typescript project and it works fine.

Please try and confirm,

[gchartier]

I am using:

• svelte version ^4.1.2
• sveltekit version ^1.22.4
• svelte-splitpanes version ^0.8.0

Here's the component where I'm getting the error on every usage of Pane:

<script lang="ts">
    import ArchiveDirectoryFile from './ArchiveDirectoryFile.svelte';
    import ArchiveDirectoryFolder from './ArchiveDirectoryFolder.svelte';
    import ViewDocumentIcon from '$lib/icons/ViewDocumentIcon.svelte';
    import { Pane, Splitpanes } from 'svelte-splitpanes';
    import type { ExplorerItem } from '$lib/types';

    export let directory: ExplorerItem[];
</script>

<section class="w-full min-h-full rounded-lg rounded-r-none">
    {#if directory.length > 0}
        <Splitpanes style="height: 400px">
            <Pane minSize={20} maxSize={70}>
                <ul class="menu menu-xs h-full bg-neutral text-neutral-content rounded-lg rounded-r-none">
                    {#each directory as item}
                        {#if item.type === 'file'}
                            <ArchiveDirectoryFile file={item} />
                        {:else if item.type === 'folder'}
                            <ArchiveDirectoryFolder folder={item} />
                        {/if}
                    {/each}
                </ul>
            </Pane>
            <Pane maxSize={70}>
                <div
                    class="flex gap-1 justify-center items-center h-full text-neutral-content my-auto bg-neutral rounded-lg rounded-l-none text-center font-light"
                >
                    <ViewDocumentIcon fillColor="fill-neutral-content" />
                    <span>Select a file to view</span>
                </div>
            </Pane>
        </Splitpanes>
    {:else}
        <p class="text-center">No files found.</p>
    {/if}
</section>

[orefalo]

@gchartier I cannot reproduce the issue.

The code above looks perfectly fine, and the typescript definition properly made it to the npm repo https://www.npmjs.com/package/svelte-splitpanes?activeTab=code

If you can't share the code base, I would recommend stripping down the code until you can isolate the issue.

[orefalo]

I will be closing this issue - feel free to reopen once you can isolate the issue.

[gchartier]

It seems to have resolved! 🤘

[orefalo]

That's excellent news.

Whoever or whatever is it ;-)

Thanks for reporting.