svelte-4-migration.md

This migration guide provides an overview of how to upgrade your system and applications based on the recent breaking changes. See the linked PRs for more detailed migration instructions. Use the migration script to migrate some of these automatically: npx svelte-migrate svelte-4

1. Node version

Upgrade to Node 16 or higher. Earlier versions are no longer supported. (#8566)

2. webpack version

Upgrade to webpack 5 or higher. Earlier versions are no longer supported. (#8515)

3. Browser conditions for bundlers

Bundlers must now specify the browser condition when building a frontend bundle for the browser. (#8516)

4. vite-plugin-svelte version

Minimum supported vite-plugin-svelte version is now 2.1.1. If you're a SvelteKit user, upgrade to 1.15.9 or newer to ensure compatibility. (#8516)

5. TypeScript version

Upgrade to TypeScript 5 or higher. Lower versions might still work, but no guarantees are made about that. (#8488)

6. Svelte/register hook, CJS runtime version, and CJS compiler output

Svelte no longer supports the CommonJS (CJS) format for compiler output and has also removed the svelte/register hook and the CJS runtime version. Consider using a bundler like Vite or the full-stack framework SvelteKit. (#8613)

7. Stricter types for Svelte functions

There are now stricter types for createEventDispatcher, Action, ActionReturn, and onMount. See the PRs linked for migration instructions. The migration script will adjust the Action and ActionReturn interface automatically (#7224, #8136)

8. Custom Elements with Svelte

The creation of custom elements with Svelte has been overhauled and significantly improved. The tag option is deprecated in favor of the new customElement option. The migration script will adjust your code automatically. (#8457)

9. SvelteComponentTyped is deprecated

Replace all instances of SvelteComponentTyped with SvelteComponent. The migration script will do this automatically for you (#8512)

10. Transitions are local by default

Transitions are now local by default to prevent confusion around page navigations. To make them global, add the |global modifier. The migration script will do this automatically for you (#6686)

11. Error on falsy values instead of stores passed to derived

The system will now throw an error on falsy values instead of stores passed to derived. (#7947)

12. Custom store implementers

People implementing their own stores from scratch using the interfaces from svelte/store now need to pass an update function in addition to the set function. (#6750)

13. Default slot bindings

Default slot bindings are no longer exposed to named slots and vice versa. (#6049)

14. Preprocessors

The order in which preprocessors are applied has changed. Now, preprocessors are executed in order, and within one group, the order is markup, script, style. Each preprocessor must also have a name. (#8618)

15. Runtime and classList.toggle(name, boolean)

The runtime now uses classList.toggle(name, boolean) which may not work in very old browsers. Consider using a polyfill if you need to support these browsers. (#8629)

16. Inert attribute for outroing elements

The inert attribute is now applied to outroing elements to make them invisible to assistive technology and prevent interaction. (#8627)