Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
dimfeld opened this issue Dec 3, 2024 · 0 comments
Labels
pkg:svelte-package Issues related to svelte-package types / typescript

Comments

@dimfeld
Copy link
Contributor

dimfeld commented Dec 3, 2024

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

@dummdidumm dummdidumm added pkg:svelte-package Issues related to svelte-package types / typescript labels Dec 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg:svelte-package Issues related to svelte-package types / typescript
Projects
None yet
Development

No branches or pull requests

2 participants