sveltejs / sveltejs/kit

svelte-package generates invalid types when a component imports a type with the same name as itself

Open
#13,098 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pkg:svelte-package types / typescript
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

  1. Clone repo
  2. pnpm install && pnpm package
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.