`$state(...)` can only be used as a variable declaration initializer or a class field

[mrcleanandfresh]

Describe the bug

When I use any rune within a class in a file suffixed with .svelte.ts, I get compile errors while running vitest. However, I don't get compile errors while running pnpm dev or pnpm build. There may be something with vitest that doesn't know the new syntax; just a guess since this is experimental.

I am currently using runes in abstract and concrete classes.

I tried installing version 4.0.0-next.6 of the @sveltejs/vite-plugin-svelte, but that didn't change anything. I am currently on version 5.0.0-next.221 of Svelte. I am using Svelte Kit version 2.0.0

The Reproduction I created fails in both runtime and tests, but on my machine, it only fails while running tests. I have tried moving the state outside the abstract class, but it just moves the compile error to the concrete class.

I thought this was a Windows thing, so I tried WSL but got the same result. It's reasonable for me to be doing something wrong, too, so I thought I'd raise this issue in case.

versions

{
  "devDependencies": {
    "@changesets/cli": "^2.27.7",
    "@melt-ui/pp": "^0.3.2",
    "@melt-ui/svelte": "^0.83.0",
    "@playwright/test": "^1.28.1",
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^3.1.1",
    "@tailwindcss/typography": "^0.5.13",
    "@testing-library/jest-dom": "^6.4.8",
    "@testing-library/svelte": "^5.2.1",
    "@types/eslint": "^9.6.0",
    "@types/ms": "^0.7.34",
    "@vitest/coverage-istanbul": "^2.0.5",
    "autoprefixer": "^10.4.19",
    "daisyui": "^4.12.10",
    "eslint": "^9.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-svelte": "^2.36.0",
    "globals": "^15.0.0",
    "jsdom": "^24.1.1",
    "postcss": "^8.4.38",
    "prettier": "^3.1.1",
    "prettier-plugin-svelte": "^3.1.2",
    "prettier-plugin-tailwindcss": "^0.6.4",
    "svelte": "5.0.0-next.221",
    "svelte-check": "^3.6.0",
    "tailwindcss": "^3.4.4",
    "typescript": "^5.0.0",
    "typescript-eslint": "^8.0.0-alpha.20",
    "vite": "^5.0.3",
    "vitest": "^2.0.5"
  },
  "type": "module",
  "dependencies": {
    "@dintero/money": "^1.0.13",
    "@steeze-ui/heroicons": "^2.4.0",
    "@steeze-ui/svelte-icon": "^1.5.0",
    "@tailwindcss/forms": "^0.5.7",
    "changesets-gitlab": "^0.12.0",
    "date-fns": "^3.6.0",
    "dexie": "^4.0.8",
    "firebase": "^10.12.5",
    "firebase-admin": "^12.3.1",
    "lodash.get": "^4.4.2",
    "mathjs": "^13.0.3",
    "ms": "^2.1.3",
    "svelte-forms-lib": "^2.0.1",
    "vite-plugin-svgr": "^4.2.0",
    "vite-tsconfig-paths": "^4.3.2",
    "yup": "^1.4.0"
  }
}

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-ynxgvk?file=src%2Froutes%2F%2Bpage.svelte

Logs

❯ src/lib/foo.test.ts (0)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/lib/foo.test.ts [ src/lib/foo.test.ts ]
CompileError: src/lib/extendable.svelte.ts:3:24 `$state(...)` can only be used as a variable declaration initializer or a class field
 1 |  export class Extendable {
 2 |    constructor() {
 3 |      this._isSomeState = $state(false);
                                           ^
 4 |      this._hasSomething = $state(false);
 5 |    }
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  no tests
   Start at  16:10:48
   Duration  0ms


 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit
Cancelling test run. Press CTRL+c again to exit forcefully.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 35.31 GB / 63.92 GB
  Binaries:
    Node: 20.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.6.0 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.1.15 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    svelte: 5.0.0-next.221 => 5.0.0-next.221

Severity

annoyance

[webJose]

Do:

export class Extendable {
  _isSomeState = $state(false);
  _hasSomething = $state(false);
}

Rich hasn't decided if constructor semantics will be a thing or not.

[mrcleanandfresh]

Thank you! I tried that in the StackBlitz, and it still gave me the same error. Are you seeing that too?

I made a reproduction in a repository mrcleanandfresh/repro-svelte-12852 , but somehow it worked. I tried the old trope of deleting node_modules and the lockfile for my project (not the Stack Blitz or the GitHub repo), but I still get the error.

Curious if the reproduction I made in GitHub works for others or if I'm in some kind of weird state.

[webJose]

Even though in Stackblitz you changed the source file, the error is seeing a different source file:

It's the old source file in the error message.

[mrcleanandfresh]

Holy crap, that worked! So I need to remove all class accessors where I'm using runes?

[webJose]

Would be irresponsible from me to say anything in that regard. Just know this is how you add state to classes. What you do next, is up to you. Good luck.

[mrcleanandfresh]

Does this error have to do with this same thing or is it some bug in my code:

 FAIL  src/lib/firebase/sync-backend.test.ts > FirebaseSyncBackend Class Disable Network Test
Svelte error: effect_orphan
`$effect` can only be used inside an effect (e.g. during component initialisation)
 ❯ Module.effect_orphan node_modules/.pnpm/svelte@5.0.0-next.221/node_modules/svelte/src/internal/client/errors.js:181:17
    180| 
    181| /**
    182|  * Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
       |        ^
    183|  * @returns {never}
    184|  */
 ❯ validate_effect node_modules/.pnpm/svelte@5.0.0-next.221/node_modules/svelte/src/internal/client/reactivity/effects.js:20:25
 ❯ Module.user_effect node_modules/.pnpm/svelte@5.0.0-next.221/node_modules/svelte/src/internal/client/reactivity/effects.js:156:2
 ❯ new FirebaseSyncBackend src/lib/firebase/sync-backend.svelte.ts:109:25
 ❯ src/lib/firebase/sync-backend.test.ts:32:17

The $effect is found inside the constructor, if that's another problem area for runes.

[mrcleanandfresh]

Here's something interesting. I don't get the error when running pnpm vitest but if I run pnpm vitest --coverage I get the error... I am using istanbul for my coverage reporter.

[mrcleanandfresh]

I updated my repro mrcleanandfresh/repro-svelte-12852 and added the Istanbul reporter, and it broke my tests. I can work around this by not using coverage in my CI/CD pipelines, but does this bug stay with Svelte, or do I take it to Istanbul?

It doesn't just wholly barf at the sight of a rune, so I think it might have something to do with Svelte?

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
CompileError: src/lib/dao/sync-backend.svelte.ts:618:40 `$state(...)` can only be used as a variable declaration initializer or a class field
 616 |  cov_253tvpbn07();
 617 |  export class SyncBackend {
 618 |    fromCache = (cov_253tvpbn07().s[0]++, $state(false));
                                                             ^
 619 |    hasPendingWrites = (cov_253tvpbn07().s[1]++, $state(false));
 620 |    // public status based on the internal state

or in the repo:

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
CompileError: src/lib/extendable.svelte.ts:63:43 `$state(...)` can only be used as a variable declaration initializer or a class field
 61 |  cov_1y1fekqtba();
 62 |  export class Extendable {
 63 |    _isSomeState = (cov_1y1fekqtba().s[0]++, $state(false));
                                                               ^
 64 |    _hasSomething = (cov_1y1fekqtba().s[1]++, $state(false));
 65 |  }



 ❯ src/lib/foo.test.ts (0)

[mrcleanandfresh]

This looks like an Istanbul problem. I changed the coverage reporter to use v8, and it worked fine with no compile errors.

[arinmirza]

Do:

export class Extendable {
  _isSomeState = $state(false);
  _hasSomething = $state(false);
}

Rich hasn't decided if constructor semantics will be a thing or not.

I had the same error message as @mrcleanandfresh and this workaround (kind of) solved my problem, thanks @webJose! Unfortunately it's also causing a mild inconvenience. This could be a good argument in favor of allowing assigning $state in the constructor (and not only as a variable declaration initializer or a class field).

In a svelte.ts file I had a class definition which is essentially like this:

class Tree<T extends Leaf | Node | Tree> {
    element: T
    
    constructor(e: T) { this.element = $state(e); }
}

This is not allowed and gives the runtime error:
$state(...) can only be used as a variable declaration initializer or a class field.
So to fix it, I have to refactor it like this:

class Tree<T extends Leaf | Node | Tree> {
    element: T = $state();
    
    constructor(e: T) { this.element = e; }
}

This does not work, because the initial state is undefined (even though it will immediately be overwritten by the constructor). Typescript complains:

Type 'T | undefined' is not assignable to type 'T'. 
'T' could be instantiated with an arbitrary type which could be unrelated to 'T | undefined'.ts(2322)

Then, how to set the initial state? I tried initializing it with a default instance of, say, Leaf.

element: T = $state(new Leaf());

This also (understandably) does not work and Typescript gives the following error:

Type 'Leaf' is not assignable to type 'T'.
  'Leaf' is assignable to the constraint of type 'T', 
  but 'T' could be instantiated with a different subtype 
  of constraint 'Leaf | Node | Tree'.

The working solution is to allow the state to be undefined.

class Tree<T extends Leaf | Node | Tree> {
    element: T | undefined = $state();
    
    constructor(e: T) { this.element = e; }
}

The inconvenience of this workaround is that now I have to check if the state is defined whenever I want to use the element variable inside the class definition, even though I know that it is defined.

This would not have been a problem if I used a function returning an object, instead of using a class.

function makeTree<T extends Leaf | Node | Tree>(e: T) {
    let element: T = $state(e);
    return { 
        get element() { return element; }
        set element(e: T) { element = e; }
        foo() { return element.foo(); }
        // ...
    }
}

I came across this issue while writing a form library/utility which uses Svelte 5's runes to keep track of modified/valid states of the input fields and forms.

Have there been any changes in the release candidate of Svelte 5 which addresses this inconvenince? I think this is a good example in favor of supporting class semantics with runes.

[webJose]

class Tree<T extends Leaf | Node | Tree> {
    element = $state<T>() as T;
    
    constructor(e: T) { this.element = e; }
}

[arinmirza]

Ohhh right.. Thank you.

[plundration]

The docs say that this is allowed:

class Todo {
	text: string;
	constructor(text: string) {
		this.text = $state<string>(text);
	}
}

So I am confused. Is it or is it not? Because I get errors:

`$state(...)` can only be used as a variable declaration initializer or a class field https://svelte.dev/e/state_invalid_placement