Add support for svelte 5
Opened this issue · 17 comments
Currently has a runtime error using svelte 5, guessing plugin needs support for it
The latest version does support Svelte 5. Please provide a reproduction repository.
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/
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.
@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?
@benmccann magic! it's working with 5.2.12
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.
Updated everything to latest and I still can't run svelte 5. I get this error
Uncaught (in promise) Error: effect_orphan
at effect_orphan (main.js:217:9)
at validate_effect (main.js:1252:3)
at user_effect (main.js:1377:2)
at init (main.js:3983:2)
at new App (main.js:5065:2)
at main.js:5202:13
Nevermind, the issue was that I was mounting the app as a class but they are functions now.
The app works at runtime now
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
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
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)
Please provide a reproduction
Hi.
When i migrate svelte 3 to svelte 5.23.2, i start get this error when i use $state and $dindable:
My dependencies:
"devDependencies": {
"@rollup/plugin-commonjs": "^28.0.3",
"@rollup/plugin-node-resolve": "^16.0.1",
"@rollup/plugin-terser": "^0.4.4",
"@rollup/plugin-typescript": "^12.1.2",
"rollup": "^4.36.0",
"rollup-plugin-css-only": "^4.5.2",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-svelte": "^7.2.2",
"svelte": "^5.23.2",
"svelte-preprocess": "^6.0.3",
"typescript": "^5.8.2"
}
System:
OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
Memory: 2.54 GB / 15.37 GB
Container: Yes
Shell: 5.8.1 - /usr/bin/zsh
Binaries:
Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v20.18.0/bin/yarn
npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
Browsers:
Chrome: 134.0.6998.117
npmPackages:
rollup: ^4.36.0 => 4.36.0
svelte: ^5.23.2 => 5.23.2
Maybe a problem with rollup build with rollup-plugin-svelte?
I'm not sure about your error, but I would recommend migrating to Svelte 4 first and not straight from 3 to 5
Please provide a reproduction
@dummdidumm I can reproduce the same issue as reported in this comment, although I assume I have a different setup.
[plugin svelte] src/index.svelte.ts:1:7
SyntaxError: Unexpected token (1:7)
at En.raise (node_modules/svelte/compiler/index.js:1:91615)
at ln.unexpected (node_modules/svelte/compiler/index.js:1:35479)
at un.parseVar (node_modules/svelte/compiler/index.js:1:47505)
at un.parseVarStatement (node_modules/svelte/compiler/index.js:1:44613)
at un.parseStatement (node_modules/svelte/compiler/index.js:1:38823)
at un.parseTopLevel (node_modules/svelte/compiler/index.js:1:36780)
at an.parse (node_modules/svelte/compiler/index.js:1:32460)
at an.parse (node_modules/svelte/compiler/index.js:1:33735)
at qs (node_modules/svelte/compiler/index.js:1:223728)
at e.compileModule (node_modules/svelte/compiler/index.js:1:781190)
at normalizeErrors (node_modules/rolldown/dist/shared/src-DHXNdTPA.mjs:2321:18)
at handleOutputErrors (node_modules/rolldown/dist/shared/src-DHXNdTPA.mjs:3256:34)
at transformToRollupOutput (node_modules/rolldown/dist/shared/src-DHXNdTPA.mjs:3250:2)
at RolldownBuild.write (node_modules/rolldown/dist/shared/src-DHXNdTPA.mjs:4459:10)
at async bundleInner (node_modules/rolldown/dist/cli.mjs:1583:16)
at async bundleWithConfig (node_modules/rolldown/dist/cli.mjs:1499:7)
at async main (node_modules/rolldown/dist/cli.mjs:1733:3)
I'm using rolldown which supports bundling TypeScript out of the box without any extra plugins. Tbh I'm not sure if the issue here is really with rollup-plugin-svelte or rather with rolldown (or the mix of the two), but I thought I'd post it since I'm seeing exactly the same error. I will probably also report this to rolldown maintainers.
Here is a repo with a minimal reproduction: https://github.com/ilokhov/rolldown-svelte-ts. Running npm run build results in the error.
I think it's really an issue with .svelte.ts files not being recognised as TypeScript files.
If I change the source file extension to .ts the bundling works (but then of course I can't use runes).
If I take out the TypeScript syntax, the bundling also works. Without TypeScript syntax I can even add runes to the file and it gets compiled correctly as far as I can tell.
Would be grateful if you have any ideas on how to make this work!
Sounds like a plugin order issue then, the Svelte plugin should take after the built-in plugin. Not sure why that doesn't happen.
Sounds like a plugin order issue then, the Svelte plugin should take after the built-in plugin. Not sure why that doesn't happen.
Thanks for the reply! I posted about this issue on rolldown repo and indeed the problem was the order in which transforms happen.
By default the built-in rolldown typescript transformation happens after rollup-plugin-svelte (and any other transforms coming from other plugins). So right now with the setup in the repo I shared, code from .svelte.ts arrives in rollup-plugin-svelte with untransformed typescript syntax, which the Svelte compiler can't deal with.
Thankfully there is a workaround to force rolldown to perform built-in transforms before any other plugins.
I guess the reason this specifically affects .svelte.ts module files and not .svelte files is because the Svelte compiler strips all typescript in .svelte component files, but does not do this for .svelte.ts module files.