Skip to content

Invalid d.ts files created with @sveltejs/package #12972

Closed
@jwerre

Description

@jwerre

Describe the bug

After packaging a Svelte component library I ran into an issue where I failed my type checking. For example:

<Button>Click here</Button>
npm run check

> svelte-test@0.0.1 check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json


====================================
Loading svelte-check in workspace: svelte-test
Getting Svelte diagnostics...

svelte-test/src/routes/+page.svelte:5:7
Error: Type '() => any' is not assignable to type 'never'. (ts)

<Button>Click here</Button>

====================================
svelte-check found 1 error and 0 warnings in 1 file

The issue is with the Button.d.ts file that is created when packaging the svelte components. For example the above Button component produces the following d.ts file:

import { SvelteComponentTyped } from "svelte";
import type { HTMLButtonAttributes } from 'svelte/elements';
export type ButtonMode = 'primary' | 'light' | 'accent' | 'accent-alt1' | 'accent-alt2' | 'accent-alt3' | 'outline' | 'plain';
export type ButtonProps = HTMLButtonAttributes & {
    mode?: ButtonMode;
    loader?: boolean;
    round?: boolean;
    block?: boolean;
    action?: boolean;
    size?: 'small' | 'medium' | 'large';
    onButtonClick?: (event: ComponentEvent<undefined, HTMLButtonElement>) => void;
    children?: Snippet;
};
import type { Snippet } from 'svelte';
import { ComponentEvent } from './';
declare const __propDef: {
    props: Record<string, never>; // <!!! ----------- this should be `ButtonProps` ------------- !!!>
    events: {
        [evt: string]: CustomEvent<any>;
    };
    slots: {};
};
type ButtonProps_ = typeof __propDef.props;
export type ButtonEvents = typeof __propDef.events;
export type ButtonSlots = typeof __propDef.slots;
export default class Button extends SvelteComponentTyped<ButtonProps_, ButtonEvents, ButtonSlots> {
}
export {};

The issue is props: Record<string, never>; should be props: ButtonProps;

When used in a Record, never effectively creates an object type that can't have any properties, because no value can be assigned to a never type. This is why I'm getting:
Error: Type '() => any' is not assignable to type 'never'. (ts)

Reproduction

I created a public repo you can install and set up locally:

  1. Initialize a new SvelteKit app with TypeScript
mkdir svelte-test
cd svelte-test
npx sv create #(with the following settings)
• SvelteKit minimal (barebones scaffolding for your new app)
• Yes, using Typescript syntax
  1. Install package
npm install --save github:jwerre/svelte-components
  1. Open src/routes/+page.svelte and add the following
<script lang="ts">
  import { Button } from '@jwerre/svelte-components';
</script>

<Button>Click here</Button>
  1. Do Types check
npm run check

After running the type check you should see the above type error...

Logs

❯ npm run check

> svelte-test@0.0.1 check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json


====================================
Loading svelte-check in workspace: /Users/jw/Desktop/svelte-test
Getting Svelte diagnostics...

/Users/jw/Desktop/svelte-test/src/routes/+page.svelte:5:7
Error: Type '() => any' is not assignable to type 'never'. (ts)

<Button>Click here</Button>

System Info

System:
    OS: macOS 15.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.41 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - ~/.npm-global/bin/yarn
    npm: 9.9.3 - node_modules/.bin/npm
  Browsers:
    Chrome: 130.0.6723.92
    Edge: 117.0.2045.40
    Safari: 18.0.1
  npmPackages:
    @sveltejs/adapter-auto: ^3.3.1 => 3.3.1 
    @sveltejs/kit: ^2.7.7 => 2.7.7 
    @sveltejs/package: ^2.3.7 => 2.3.7 
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.0 
    svelte: ^5.1.11 => 5.1.11 
    vite: ^5.4.10 => 5.4.10 

I'm also using Typescript:
tslib: "^2.8.1",
typescript: "^5.6.3",

Severity

blocking all usage of SvelteKit

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions