bug: can't use Typescript in custom element `extend` function

[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/rollup@4.34.8/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/rollup@4.34.8/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/rollup@4.34.8/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/rollup@4.34.8/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/rollup@4.34.8/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

[MelleD]

Hey @isaacvr,

If am using svelte 5.10.0
I see a difference in the script: true/false

See: https://github.com/MelleD/lovelace-expander-card/blob/main/svelte.config.js#L11

If I set this to false:

I get error:

error during build:

[vite-plugin-svelte] [plugin vite-plugin-svelte] Not implemented type annotation EmptyStatement
file: /project/lovelace-expander-card/src/ExpanderCard.svelte
Error: [plugin vite-plugin-svelte] Not implemented type annotation EmptyStatement

With true:

src/ExpanderCard.svelte (10:15): Unexpected token `config`. Expected * for generator, private key, identifier or async (Note that you need plugins to import files that are not JavaScript)

But anyway currently no chance gut get this project running again. Something breaks with custom elements.

Do you have maybe another hint what I can try?

[isaacvr]

@MelleD yes, that also happened to me. There are some scenarios where you might have empty statements like functions with a default value of ()=> {} or something like that, which can cause that error. That was a real pain recently as well.

[MelleD]

Hey @isaacvr,
It's only 1 file, but I see no empty statements
https://github.com/MelleD/lovelace-expander-card/blob/main/src/ExpanderCard.svelte

I thought first this line: https://github.com/MelleD/lovelace-expander-card/blob/main/src/ExpanderCard.svelte#L47

Wich version of svelte and @sveltejs/vite-plugin-svelte do you use?

[MelleD]

Hello everyone,

Is there any news or a statement about the problem?

Any information on whether a fix is ​​even being considered would be helpful for further action, or whether it will simply no longer be supported in the future.

[paoloricciuti]

Hey just took a look at this...the problem is that the function used in the custom element tag is not parsed but just used as is in the javascript file...since you are using Typescript in there it's obviously erroring out. Let me take a deeper look