bug: Error after upgrading svelte from 5.12.0 to >5.13.0 for customElement

[MelleD]

Describe the bug

I have a small hobby project and am currently having a problem upgrading the version. Since I'm not an expert, I don't know whether the behavior is intentional or a bug.

If it's not a bug, please just relabel it.

No one in Discord could help me straight away and say I should open a ticket here.

Problem 1
When I switched from svelte 5.12.0 to 5.13.0 I got the following error:

"error during build:
[vite-plugin-svelte] [plugin vite-plugin-svelte] Not implemented type annotation EmptyStatement"

Problem 2 is different since Svelte >5.15.0 I get a different error

See build: https://github.com/MelleD/lovelace-expander-card/actions/runs/13476126898/job/37655546958#step:7:44

x Build failed in 153ms
error during build:
src/ExpanderCard.svelte (27:15): Unexpected token `config`. Expected * for generator, private key, identifier or async (Note that you need plugins to import files that are not JavaScript)
file: /home/runner/work/lovelace-expander-card/lovelace-expander-card/src/ExpanderCard.svelte:27:15

[25](https://github.com/MelleD/lovelace-expander-card/actions/runs/13476126898/job/37655546958#step:7:26):     extend: (customElementConstructor) => class extends customElementConstructor {
[26](https://github.com/MelleD/lovelace-expander-card/actions/runs/13476126898/job/37655546958#step:7:27):         // re-declare props used in customClass.
27:         public config!: ExpanderConfig;
                   ^
28: 
29:         public setConfig(conf = {}) {

    at getRollupError (file:///home/runner/work/lovelace-expander-card/lovelace-expander-card/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:397:41)
    at ParseError.initialise (file:///home/runner/work/lovelace-expander-card/lovelace-expander-card/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:14112:[28](https://github.com/MelleD/lovelace-expander-card/actions/runs/13476126898/job/37655546958#step:7:29))
    at convertNode (file:///home/runner/work/lovelace-expander-card/lovelace-expander-card/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:16006:10)
    at convertProgram (file:///home/runner/work/lovelace-expander-card/lovelace-expander-card/node_modules/.pnpm/rollup@4.[34](https://github.com/MelleD/lovelace-expander-card/actions/runs/13476126898/job/37655546958#step:7:35).8/node_modules/rollup/dist/es/shared/node-entry.js:15249:12)
    at Module.setSource (file:///home/runner/work/lovelace-expander-card/lovelace-expander-card/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:16993:24)
    at async ModuleLoader.addModuleSource (file:///home/runner/work/lovelace-expander-card/lovelace-expander-card/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:20902:13)
 ELIFECYCLE  Command failed with exit code 1.

Problem is here with the public config
https://github.com/MelleD/lovelace-expander-card/blob/main/src/ExpanderCard.svelte#L27

This works before and since svelte >5.15.0 there is an issue.

Thanks for your input

Reproduction

https://github.com/MelleD/lovelace-expander-card/

Logs

x Build failed in 144ms
error during build:
src/ExpanderCard.svelte (27:15): Unexpected token `config`. Expected * for generator, private key, identifier or async (Note that you need plugins to import files that are not JavaScript)
file: /home/runner/work/lovelace-expander-card/lovelace-expander-card/src/ExpanderCard.svelte:27:15

[25](https://github.com/MelleD/lovelace-expander-card/actions/runs/13756074590/job/38463662107?pr=429#step:7:26):     extend: (customElementConstructor) => class extends customElementConstructor {
[26](https://github.com/MelleD/lovelace-expander-card/actions/runs/13756074590/job/38463662107?pr=429#step:7:27):         // re-declare props used in customClass.
27:         public config!: ExpanderConfig;
                   ^
28: 
29:         public setConfig(conf = {}) {

    at getRollupError (file:///home/runner/work/lovelace-expander-card/lovelace-expander-

System Info

System:
    OS: macOS 12.7.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 102.78 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 22.8.0 - /usr/local/bin/node
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 10.4.1 - /usr/local/bin/pnpm
  npmPackages:
    svelte: 5.20.0 => 5.20.0 

But also on github action see build
See build: https://github.com/MelleD/lovelace-expander-card/actions/runs/13476126898/job/37655546958#step:7:44

Severity

blocking an upgrade

[aplotor]

also happening on a new install of bits-ui because its svelte version isn't pinned. just importing the bits-ui lib and starting dev server, immediately crashes with err Not implemented type annotation EmptyStatement [plugin vite-plugin-svelte:optimize-svelte]. i had to npm ci on an old package-lock.json to get it working for now. this seems to be quite serious, im surprised there isnt more activity on this issue

[tim-lux]

also happening on a new install of bits-ui because its svelte version isn't pinned. just importing the bits-ui lib and starting dev server, immediately crashes with err Not implemented type annotation EmptyStatement [plugin vite-plugin-svelte:optimize-svelte]. i had to npm ci on an old package-lock.json to get it working for now. this seems to be quite serious, im surprised there isnt more activity on this issue

yes, i can confirm, may I ask you, on which version are you (svelte & bits-ui)? I currently try to migrate shadcn-svelte to svelte 5 components and get this error with bits-ui.... I couldn't solve it so far, but it's frustrating since I want to migrate to svelte 5 :/

[aplotor]

my package.json has

		"bits-ui": "1.0.0-next.86",
		"svelte": "5.11.0",

but a new install of this wont work. i had to use an old package-lock.json from when it was already working. if you need this urgently maybe file a bug report in bits-ui and try to get them to pin the svelte version to before this started happening

[MelleD]

Does anyone have any suggestions for what I need to change? I can also adjust the code, but I have no idea which direction to look in.

[aslak01]

I ran into this trying to boot a project i'd been developing using pnpm with npm. Switching back to pnpm it went away. Not sure what's going on with that (please let me know if you know), but maybe it could help others that end up here too.

[MelleD]

I'm a little confused that no one (even the developers) can comment on this issue. This doesn't bode well for the future, and I'll probably look for another framework.

[isaacvr]

The solution for me is to add this to the vitePreprocess config function:

// svelte.config or vite.config

preprocess: vitePreprocess({
    postcss: true,
    script: true // add this line and the error goes away
})

Source: Svelte integrations

[MelleD]

Hey @isaacvr ,

thanks tried it (https://github.com/MelleD/lovelace-expander-card/pull/464/files)

but get this error (https://github.com/MelleD/lovelace-expander-card/actions/runs/14477973008/job/40608105281?pr=464)
"error during build:
src/ExpanderCard.svelte (27:15): Unexpected token config. Expected * for generator, private key, identifier or async (Note that you need plugins to import files that are not JavaScript)
"

It is the same error like on main