Skip to content

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

@dimfeld

Description

@dimfeld

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 dimfeld/svelte-maplibre#222

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions