svelte-package generates invalid types when a component imports a type with the same name as itself
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the bug
When a Svelte component imports a type with the same name as itself, invalid types are generated by svelte-package because the type import is included in the file and it conflicts with the generated type for the component.
Source
<!-- File: src/lib/Source.svelte -->
<script lang="ts">
import type { Source } from "./types.js";
let x: Source = $state({ name: 'a' });
</script>
{x.name}
Generated Types (annotated)
// File: Source.svelte.d.ts
// This is incorrectly included
import type { Source } from "./types.js";
// This is correct but conflicts with the above type import
declare const Source: import("svelte").Component<Record<string, never>, {}, "">;
type Source = ReturnType<typeof Source>;
export default Source;
When trying to import this component from the package, you then see an error like
Error: 'Source' resolves to a type-only declaration and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.
If this is hard to fix for some reason, it would be nice if there was a way to detect this and raise an error during packaging.
Reproduction
https://github.com/dimfeld/svelte-package-type-name-bug
- Clone repo
pnpm install && pnpm package- Open
dist/Source.svelte.d.ts
Note that it includes the import { Source } from './types.js and this conflicts with the exported type from the component. There's no reason for that import to be present in the generated Source.svelte.d.ts, and indeed with Svelte 4 I believe it was not.
The reproduction uses Vite 6 but it also happens with Vite 5, which may not be relevant for svelte-package anyway.
Logs
No response
System Info
System:
OS: macOS 15.1.1
CPU: (16) arm64 Apple M3 Max
Memory: 5.14 GB / 128.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.11.0 - /opt/homebrew/opt/node@22/bin/node
Yarn: 1.22.22 - ~/.pnpm/yarn
npm: 10.9.0 - /opt/homebrew/opt/node@22/bin/npm
pnpm: 9.14.4 - /opt/homebrew/bin/pnpm
bun: 1.1.38 - /opt/homebrew/bin/bun
Watchman: 2024.11.25.00 - /opt/homebrew/bin/watchman
Browsers:
Brave Browser: 131.1.73.91
Safari: 18.1.1
npmPackages:
@sveltejs/adapter-auto: ^3.0.0 => 3.3.1
@sveltejs/kit: ^2.9.0 => 2.9.0
@sveltejs/package: ^2.0.0 => 2.3.7
@sveltejs/vite-plugin-svelte: ^5.0.0 => 5.0.1
svelte: ^5.0.0 => 5.4.0
vite: ^6.0.0 => 6.0.2
Severity
annoyance
Additional Information
Workaround is just to rename the import to something else. import { Source as MySource } from './types.js' or similar.
Originally encountered in https://github.com/dimfeld/svelte-maplibre/issues/222
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Run the reproduction with pnpm install && pnpm package, then inspect dist/Source.svelte.d.ts and trace the svelte-package type-generation path that includes the conflicting import. Done means the generated declaration no longer conflicts with the component's generated Source type and the reproduction package can import the component successfully.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- build-system
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100