SvelteKit Example Broken - Types

[ainsleyclark]

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

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

[chrisjobando]

This fix worked for me: #128 (comment)

[ainsleyclark]

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]

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']> {}
}