Svelte 5 Migration
How to migrate to Svelte 5 from Svelte 4.
Prerequisites
- Make sure you have read up on the changes from Svelte 4 to Svelte 5. Svelte provides a comprehensive guide for this on their website.
- Make sure you have committed any pending changes so that you don't lose any code.
- Understand which of your components have custom behavior/styles so that you can reimplement that yourself.
Migrate Configs
The tailwind.config
, components.json
, and utils
files have all changed for Svelte 5.
Automatic
Note: This works best for projects that have not changed the contents of tailwind.config
, utils
, and the global css file.
Manual
Update components.json
Update the registry and add the hooks
key under aliases
.
Update tailwind.config
Add tailwindcss-animate
.
Add tailwindcss-animate
plugin and animations config.
Update utils
Note: You may not want to do this if you aren't going to upgrade all your components, as some components may still rely on the now removed flyAndScale
function.
The only function exported from utils now is cn
.
Upgrade Components
Pick and choose which components to upgrade with the update
command.
Upgrade bits-ui
The update
command doesn't upgrade bits-ui
so you will need to do that yourself.
Remove unused dependencies
In Svelte 5 we have changed some dependencies.
Remove cmdk-sv
cmdk-sv
has been merged into bits-ui
and is no longer necessary. Update any imports from cmdk-sv
to bits-ui
.
Remove svelte-headless-table
We got rid of svelte-headless-table
in favor of @tanstack/table-core
On This Page