Closed
Description
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:
- 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
- Install package
npm install --save github:jwerre/svelte-components
- Open
src/routes/+page.svelte
and add the following
<script lang="ts">
import { Button } from '@jwerre/svelte-components';
</script>
<Button>Click here</Button>
- 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