Legacy reactive statements are not allowed in components using runes – mixing $: with $state in Svelte 5

Answer

There is no compiler flag that lets you keep legacy $: statements in a component that also uses Svelte 5 runes ($state, $derived, $effect). The compiler treats any file containing a rune as rune‑mode and will emit the error “Legacy reactive statements are not allowed in components using runes”. Consequently, the only supported way to migrate incrementally is to extract the legacy logic into a separate child component that does not use runes.

Confirmed facts

• The Svelte 5 compiler enforces a strict separation: a component is either legacy‑mode (only $:) or rune‑mode (any rune). Mixing both triggers a compile‑time error.
• No undocumented flag or experimental switch exists to relax this rule in the current stable release.
• The official migration guide recommends moving legacy reactive blocks to a child component or to a standalone module.
• As of the latest stable Svelte 5.x, there is no announced roadmap entry that plans to allow $: and runes to coexist in the same file.

Steps for incremental migration

1. Identify the $: blocks you want to keep unchanged.
2. Create a new child component (e.g., LegacyLogic.svelte) that contains only those $: statements and does not import or use any runes.
3. Pass any required data from the parent to the child via props, and return needed values via bind:this or callback props if the child needs to affect parent state.
4. Import the child component in the parent rune‑mode component and use it in the template.
5. Remove the extracted $: blocks from the parent file.
6. Re‑run the build; the error should disappear and the parent can continue using $state, $derived, $effect for new features.

If you need to share state without creating a child component, the only alternative is to move the legacy logic into a plain JavaScript/TypeScript module that exports functions or a Svelte store, then import that module in both the parent and any other components. This still avoids mixing syntaxes in a single Svelte file.