Bug: Using Svelte component in island raises `TypeError`

[dhruvkb]

• [x] I have read the troubleshooting section before opening an issue.
• [x] I have tried upgrading iles and vite.

Description 📖

Using a Svelte island raises TypeError.

Reproduction 🐞

0. Create a new project.
1. Turn on Svelte support using svelte: true in iles.config.ts. This installs the necessary dependencies (sweet!).
2. Add a Svelte component (tried both TS and non-TS).
3. Import this component in a Vue component on the page with the client:load directive.
4. See error in the console. The island also does not appear.

Logs 📜

Uncaught TypeError: component is not a constructor
    createIsland http://localhost:3000/@id/@islands/hydration/svelte:11
    hydrateNow http://localhost:3000/node_modules/@islands/hydration/dist/chunk-AX6GSPTT.js:6
    <anonymous> http://localhost:3000/ line 7177 > injectedScript:4
[svelte:11:15](http://localhost:3000/@id/@islands/hydration/svelte)

I made some changes in node_modules to log the value of component.

It's actually true that component is not a constructor but rather an Object with a render() function. I'm not very familiar with Svelte so I don't know what it actually is.

Screenshots 📷

The Devtools show the component as 'Unknown Component'.

[ElMassimo]

Hi Dhruv! It's likely related to the svelte version, as svelte's internals change from time to time.

Have you tried the blog demo? It's using svelte@3.46.5.

Please share a full code example (preferably on StackBlitz) and I'll take a look.

[dhruvkb]

Setting svelte: true in iles.config.ts installs 3.48.0 by default. But pinning Svelte to version 3.46.5 worked.

Thanks @ElMassimo. I'm closing this issue as my problem has been resolved.