Breaking changes

While Svelte 5 is a complete rewrite, we have done our best to ensure that most codebases can upgrade with a minimum of hassle. That said, there are a few small breaking changes which may require action on your part. They are listed here.

Components are no longer classespermalink

In Svelte 3 and 4, components are classes. In Svelte 5 they are functions and should be instantiated differently. If you need to manually instantiate components, you should use mount or createRoot (imported from svelte) instead. If you see this error using SvelteKit, try updating to the latest version of SvelteKit first, which adds support for Svelte 5. If you're using Svelte without SvelteKit, you'll likely have a main.js file (or similar) which you need to adjust:

 import { mount } from 'svelte';
import App from './App.svelte'

 const app = new App({ target: document.getElementById("app") });
 const app = mount(App, { target: document.getElementById("app") });

export default app;

As a stop-gap-solution, you can also use createClassComponent or asClassComponent (imported from svelte/legacy) instead to keep the same API after instantiating. If this component is not under your control, you can use the legacy.componentApi compiler option for auto-applied backwards compatibility (note that this adds a bit of overhead to each component).

Similarly, components no longer have a render method when compiled for server side rendering. Instead, pass the function to render from svelte/server:

 import { render } from 'svelte/server';
import App from './App.svelte';

 const { html, head } = App.render({ message: 'hello' });
 const { html, head } = render(App, { props: { message: 'hello' } });