Compatibility Issues with Svelte 5 Runes Mode in Framework7 Svelte

Questions
1

I am experiencing issues with Svelte 5 Runes Mode compatibility in Framework7 Svelte. Reactive declarations in Framework7’s component files are causing errors.

For example:
[svelte] reactive_declaration_non_reactive_property A $: statement (node_modules/​framework7-svelte/​components/​list-item.svelte:103:2) read reactive state that was not visible to the compiler. Updates to this state will not cause the statement to re-run. The behaviour of this code will change if you migrate it to runes mode

list-item.svelte (Line 103):

$: liClasses = classNames(
    className,
    {
      'list-group-title': groupTitle,
      'media-item': isMedia,
      swipeout,
      'accordion-item': accordionItem,
      'accordion-item-opened': accordionItemOpened,
      disabled: disabled && !(radio || checkbox),
      'no-chevron': noChevron,
      'chevron-center': chevronCenter,
      'disallow-sorting': sortable === false,
    },
    colorClasses($$props),
  );

When will an update addressing this issue be released?
What can I do to resolve this problem for now?

Note: I do not want to downgrade the Svelte version.

Versions:
“framework7”: “^8.3.4”,
“framework7-icons”: “^5.0.5”,
“framework7-svelte”: “^8.3.4”,
“svelte”: “^5.1.6”

1 Like
2

Yes, I am also facing the same issue.
If you want to solve it, you need to use Svelte 4. I also tried using Svelte 5 and modifying the initial App.svelte initialization, but it still didn’t work properly. So, for now, I had to revert to an older version of Vite and Svelte.

"framework7": "^8.3.4",
"framework7-svelte": "^8.3.4",
"svelte": "^4.2.19",
"vite": "^4.5.9",
"@sveltejs/vite-plugin-svelte": "^2.5.3"

These four dependencies need to be adjusted; all other plugins should work as usual.

Let me know if you need further refinements! :blush: