[Bug]: Instantiating a component with new is no longer valid in Svelte 5.

[allozaur]

Describe the bug

Just created an empty SvelteKit Library project with Beta version of Svelte 5 enabled and installed Storybook.

This is what i get when viewing demo component stories:

To Reproduce

pnpm create svelte

Choose Svelte 5 beta.

pnpm dlx storybook@latest init

System

No response

Additional context

I managed to find that this particular code causes the error:

https://github.com/storybookjs/storybook/blob/main/code/renderers/svelte/src/render.ts#L69

According to docs, this:

let createdComponent = new PreviewRender({ target: canvasElement, props: { storyFn, storyContext, name, kind, showError } });

should be changed to this:

import { mount } from 'svelte';

function renderToCanvas({ storyFn, kind, name, showMain, showError, storyContext, forceRemount }, canvasElement) {

  // Rest of the code

  let createdComponent = mount(PreviewRender, { target: canvasElement, props: { storyFn, storyContext, name, kind, showError } });

  // Rest of the code
}

[JReinhold]

@benmccann is there a recommended approach to migrating this while still being compatible with Svelte 4?

I'd expect as soon as we try to do import { mount } from 'svelte' or import { createClassComponent } from 'svelte/legacy'; it will fail for all Svelte 4 users, unless you're planning on backporting svelte/legacy to Svelte 4?

I think we can make this work by doing version detection via svelte/package.json, but maybe you had a cleaner idea.

[JReinhold]

Actually we're strongly proposing we make this a breaking change for Storybook 8.0 so we don't have to juggle multiple Svelte versions. The migration from Storybook 7 to 8 should be easy for users.

Do you have any input or objections @benmccann?

[allozaur]

@JReinhold it seems that i have some early-working code for the Storybook Svelte 5 renderer with these changes.

Just tested the svelte-kit/skeleton-js sandbox and it worked just fine locally for me :)

Tomorrow i will try to test Svelte 5 code to see how stories look.