Can I import svelte 5 components to svelte 4?

[devcsrj]

We have a huge kit app that is using Svelte 4. Granted, migrating to Svelte 5 is the ideal way to go, but sadly not yet in the highest priority.

However, we are about to extract components out of our kit app, into standalone Svelte components. The question is, should we write the components:

• ...in Svelte 4
• ...in Svelte 5

A Svelte 4 component would of course when imported to a Svelte 4 app (doh!), but would a Svelte 5 component work? Are there gotchas/footguns that we should be wary of?

[brunnerh]

You cannot directly import components using Svelte 5 syntax in a Svelte 4 project. It is recommended for component libraries to distribute the (pre-processed) source of components, so the Svelte 4 compiler would not understand that.

Even if the components are compiled down to JS that does not quite work because the mounting mechanism is different.

It might be possible if you add exports that wrap all the components in asClassComponent. The Svelte 5 package should be externalized, otherwise you could end up with separate runtimes (and potentially broken reactivity) if you use multiple component libraries. Not sure how to do that if you locally have a Svelte 4 instance installed.

[dominikg]

You can only use components authored with runes in applications compiled with the svelte5 compiler.
So if you want to make a component library that is compatible to svelte4 compiler, you have to stick with svelte4 syntax.

Now the svelte5 compiler understands svelte4 syntax, so you can migrate your huge kit app to use the svelte5 compiler by updating to that version even without updating all of your code. (some small adjustments might have to be made but they should be reasonable).

Once the app is compiled with svelte5, you can use svelte5 syntax component libraries too even if your application code is still using svelte4 syntax.

[brunnerh]

Unfortunately slight differences in behavior can still cause issues, so one would still need to essentially re-test the entire application after the upgrade to be sure (which is probably non-trivial).