Svelte 5 runes mode not working

[r-unruh]

Describe the bug

If you force your compiler into Svelte 5 runes mode as documented:

export default {
  ...
  compilerOptions: {
    runes: true
  }
}

...and use an icon anywhere in a component, you get the following error:

[vite] Error when evaluating SSR module /src/lib/components/Navbar.svelte: failed to import "~icons/material-symbols/person.svelte"
|- CompileError: Cannot use $$props in runes mode

The solution is to use $props instead of $$props. Of course, this would break Svelte <5 support.

Reproduction

Use Svelte 5 Alpha - opt into runes-only mode - use this library as usual

System Info

System:
    OS: Linux 6.7 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
    Memory: 2.99 GB / 7.64 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 21.6.1 - /usr/bin/node
    Yarn: 1.22.21 - /usr/bin/yarn
    npm: 10.4.0 - /usr/bin/npm
    pnpm: 8.14.0 - /usr/bin/pnpm
  Browsers:
    Chromium: 121.0.6167.139

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.

[userquin]

If you dont enable runes, $props will work? Maybe it is better to add a new svelte-runes compiler updating svelte compiler logic.

[r-unruh]

Yeah, if you don't force runes, $$props will still work in Svelte 5. However, $props will probably be the recommended way soon.

In my opinion, adding a new compiler makes things more complicated for the user. Instead of a straightforward single "svelte" option there would now be choices to make.

[userquin]

my question is about using svelte5 without runes, will $props work?

[r-unruh]

If you excplicitly disable runes mode $props won't work in Svelte 5.

Which is a good point.