SvelteKit Example Broken - Types

unplugin / unplugin-icons

🤹 Access thousands of icons as components on-demand universally.

https://www.npmjs.com/package/unplugin-icons

MIT License

3.65k stars 131 forks source link

SvelteKit Example Broken - Types #308

Open ainsleyclark opened 9 months ago

ainsleyclark commented 9 months ago

Describe the bug

By cloning the repo, and opening the sveltekit example folder within an IDE. The type defs are brokwn, see attached screenshot. This is also not working on a project of mine with the same error and unsure why the types are not resolving.

Cannot resolve directory 'virtual:icons'

Reproduction

Repo - /examples/sveltekit

System Info

System:
    OS: macOS 14.0
    CPU: (12) arm64 Apple M2 Max
    Memory: 33.10 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.6.1 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.8.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Edge: 115.0.1901.188
    Safari: 17.0

Used Package Manager

npm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
[X] The provided reproduction is a minimal reproducible of the bug.

chrisjobando commented 9 months ago

This fix worked for me: https://github.com/unplugin/unplugin-icons/issues/128#issuecomment-1545549162

ainsleyclark commented 9 months ago

That still didn't work for me unfortunately:

app.d.ts:

// Unplugin icons
import type * as Icons from 'unplugin-icons/types/svelte';
export default Icons;

chipit24 commented 9 months ago

I'm running into this as well. Things are set up correctly, the icons are working, but WebStorm is giving me the Cannot resolve directory ~icons error as well.

However, npm run check (svelte-kit sync && svelte-check --tsconfig ./tsconfig.json) doesn't produce any errors, and when I CMD+click the import statement (e.g. "~icons/mi/external-link") it takes me to node_modules/unplugin-icons/types/svelte4.d.ts which shows:

declare module 'virtual:icons/*' {
  import { SvelteComponent } from 'svelte'
  import type { SvelteHTMLElements } from 'svelte/elements'
  export default class extends SvelteComponent<SvelteHTMLElements['svg']> {}
}

declare module '~icons/*' {
  import { SvelteComponent } from 'svelte'
  import type { SvelteHTMLElements } from 'svelte/elements'
  export default class extends SvelteComponent<SvelteHTMLElements['svg']> {}
}