Programmatically instantiating Svelte 5 component from plain JavaScript

[reckart]

I am trying to upgrade my code from Svelte 4 to Svelte 5, but I am running into trouble.

I am generating a JavaScript snipped on the server side and then use that to instantiate a pre-compiled Svelte 4 component that is loaded from url like this (the code is Java, the return value is the JavaScript snippet):

        var id = aComponent.getMarkupId();
        return String.join("\n", //
                "{", //
                "  let element = document.getElementById('" + id + "');", //
                "  import('" + url + "')", //
                "    .then(module => { ", //
                "      let component = new module.default({", //
                "        target: element,", //
                "        props: " + propsJson, //
                "      });", //
                "      element.$destroy = () => component.$destroy()", //
                "    })", //
                "}" //

Rendered, it looks like this:

let element = document.getElementById('item19');
  import('../wicket/resource/de.tudarmstadt.ukp.inception.recommendation.footer.RecommendationEventFooterPanel/RecommendationEventFooterPanel.min.js')
    .then(module => { 
      let component = new module.default({
        target: element,
        props: {
           "feedbackPanelId":"feedbackPanel17",
           "topicChannel":"/project/253/user/admin/recommender",
           "csrfToken":"...",
           "wsEndpointUrl":"ws://localhost:8080/ws"
         }
      });
      element.$destroy = () => component.$destroy()
    })

However, with Svelte 5, I get the error that components can no longer be instantiated using new. I have already tried enabling the Svelte 4 Component API compatibility mode in svelte.config.js but to no avail.

Error: https://svelte.dev/e/component_api_invalid_new

What is the correct way to programmatically instantiate a Svelte 5 component from plain JS?

Searching for a solution, I found advice to use mount or similar calls that need to be imported from svelte, but at the point this code is running, I have no way of importing stuff from svelte anymore. I need to rely on what has been packaged into the (minified) JS bundle.

[brunnerh]

I would probably export mount/unmount alongside the components.