[SOLVED] How to integrate Svelte in existing site

How to integrate Svelte in existing site

This is a successor question to How to integrate Svelte in other App Stack. The setting is the same: I've got an existing site which I'd like to extend by Svelte. The respone by @bob-fanger looked very promising and took me pretty far. But it seems like this isn't working the same way using Svelte v5. What I get with his approch is a console error:

Uncaught TypeError: f is undefined
    i http://127.0.0.1:9000/bundle.js:8
    m http://127.0.0.1:9000/bundle.js:30
    E http://127.0.0.1:9000/bundle.js:47
    <anonymous> http://127.0.0.1:9000/bundle.js:50
bundle.js:8:3

Here you can find the example project source code: https://codeberg.org/thomas-mc-work/svelte-integration

I'd be happy for any suggestions! Preferably a reference to a bare minimum example project.

Solution

// Svelte 3 & 4
const app = new App({
  target: document.body,
  props: {
    name: 'world'
  }
});

// Svelte 5
import { mount } from "svelte";
import App from "./App.svelte";

mount(App, {
  target: document.getElementById("svelte-app"),
  props: {
    name: "world",
  },
});

Update the snippet in src/main.js to use the new Svelte 5 syntax.

https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes