Breaking Changes to Watch For

While Svelte 5 maintains good backward compatibility, some things have changed.

Event Modifiers Removed

svelte
<!-- ❌ No longer works -->
<form on:submit|preventDefault={handler}>

<!-- ✅ Handle manually -->
<form onsubmit={(e) => {
  e.preventDefault();
  handler(e);
}}>

beforeUpdate and afterUpdate Deprecated

svelte
<!-- Svelte 4 -->
<script>
  import { beforeUpdate, afterUpdate } from 'svelte';
  
  beforeUpdate(() => { /* ... */ });
  afterUpdate(() => { /* ... */ });
</script>

<!-- Svelte 5 -->
<script>
  $effect.pre(() => {
    // Runs before DOM updates (like beforeUpdate)
  });
  
  $effect(() => {
    // Runs after DOM updates (like afterUpdate)
  });
</script>

$$props and $$restProps

svelte
<!-- Svelte 4 -->
<script>
  // $$props contains all props
  // $$restProps is props not explicitly declared
</script>

<div {...$$restProps}>...</div>

<!-- Svelte 5 -->
<script>
  let { children, class: className, ...rest } = $props();
</script>

<div class={className} {...rest}>
  {@render children()}
</div>

Component Events Changed

svelte
<!-- Svelte 4: Parent -->
<Child on:message={handleMessage} />

<!-- Svelte 5: Parent -->
<Child onmessage={handleMessage} />

Immutable Arrays with Each Blocks

In Svelte 5, mutating arrays directly may not trigger updates in some cases:

javascript
// ❌ May not trigger update
items.push(newItem);

// ✅ Always triggers update
items = [...items, newItem];

📖 Breaking changes