Add support for svelte 5

[AnzeKop]

Currently has a runtime error using svelte 5, guessing plugin needs support for it

[dummdidumm]

The latest version does support Svelte 5. Please provide a reproduction repository.

[YegorKozlov]

It's not working for me either. I'm getting an initialization error

which leads to

The repo to reproduce is https://github.com/YegorKozlov/svelte5-rollup/

[quentadave]

It is working for me but at first I didn't realize how many changes I needed to make to my rollup config to get everything working right. And not only that, if you're mounting a component into an html document in your own code, you'll get weird errors from what I think is its vm or something. Runtime stuff it doesn't like if you use the old method of instantiating your component with 'new', since components aren't classes/objects anymore.

[benmccann]

@YegorKozlov please upgrade to svelte 5.2.12 in order to fix that issue

@quentadave can you share some of the changes you had to make so we can see if there's anything we should mention in the docs here or in the migration guide?

[YegorKozlov]

@benmccann magic! it's working with 5.2.12

[quentadave]

@benmccann

Sure!

For starters, I somehow had rollup-plugin-svelte working WITHOUT actually having the core Svelte package installed via NPM as well. So, I installed Svelte (5.2.9).

Next, I learned that runes are not enabled by default, so I had to add this in the svelte object compilerOptions: { runes: true }

Then I had trouble with using runes in .svelte.js files, even though I was naming them this way. The runtime would crash on it. For that I just had to adjust the extensions in the rollup config in extensions, include, and resolve extensions.

My final config for plugins and resolve now looks like this:

    plugins: [
      svelte({
        extensions: ['.svelte', '.svelte.js', 'svelte.ts'],
        include: "./svelte/**/*.{svelte,svelte.js,svelte.ts}",
        preprocess: sveltePreprocess(),
        compilerOptions: { runes: true }
      }),
      resolve({
        browser: true,
        exportConditions: ["svelte"],
        extensions: ['.svelte', '.svelte.js', 'svelte.ts']
      }),

Finally, in my case I'm compiling top-level components and mounting them individually in a legacy PHP app. So for each Svelte component that needs to be mounted in the DOM, I had to change how that was done. That IS actually covered in the migration guide, but if you happen to miss it, as I did, it's kind of hard to connect the dots from the strange-looking errors that Svelte throws in this case. It doesn't just say "hey, don't instantiate these with new anymore!" Instead there are uncaught runtime errors. This led me at first to think it was a compilation issue.

[benmccann]

Thanks for sharing the details!

Next, I learned that runes are not enabled by default, so I had to add this in the svelte object compilerOptions: { runes: true }

That's not quite accurate. Runes are enabled by default. What that option does is force you to use them and disables the Svelte 4 syntax. See https://svelte.dev/docs/svelte/svelte-compiler#CompileOptions for more details

[benmccann]

Can others confirm if they had to update these options?

        extensions: ['.svelte', '.svelte.js', 'svelte.ts'],
        include: "./svelte/**/*.{svelte,svelte.js,svelte.ts}",

I see that Simon added support for .svelte.js files about 18 months ago, so I'd expect this to work:
https://github.com/sveltejs/rollup-plugin-svelte/blob/a4b04654ff8866fad04ff49bda774d8239c66fc3/index.js#L20C7-L20C26

It's possible that something was missed though

And I do wonder if the readme example for extensions and include should be updated

[ceifa]

I was able to make it work without adding these options @benmccann, but .svelte.ts file support (added in svelte 5) gives the following error:

[plugin svelte] index.svelte.ts:1:12
SyntaxError: Unexpected token (1:12)
at _n.raise (node_modules\svelte\compiler\index.js:1:89487)
at en.unexpected (node_modules\svelte\compiler\index.js:1:34541)
at en.expectContextual (node_modules\svelte\compiler\index.js:1:33867)
at rn.parseImport (node_modules\svelte\compiler\index.js:1:56033)
at rn.parseStatement (node_modules\svelte\compiler\index.js:1:38615)
at rn.parseTopLevel (node_modules\svelte\compiler\index.js:1:35842)
at Yt.parse (node_modules\svelte\compiler\index.js:1:31522)
at Yt.parse (node_modules\svelte\compiler\index.js:1:32797)
at Mr (node_modules\svelte\compiler\index.js:1:235340)
at e.compileModule (node_modules\svelte\compiler\index.js:1:766481)

[dummdidumm]

Please provide a reproduction