False positive: `non_reactive_update`

[Bilge]

Describe the bug

Svelte erroneously reports non_reactive_update when $props() is present and bind:this is used within an {#if} block. For some reason, both these things have to be present for this bug to manifest.

Reproduction

https://svelte.dev/playground/hello-world?version=5.16.0#H4sIAAAAAAAACm2OwW7CMAyGX8XyOIA00XugkzhMAgluu8EOLXVZJDeJGsNAUd59Tsduu1nf9_u3E7pmIDS4JWYP337kDubUWaFuga_YW6aI5phQHqHkClD-3NqEsIw3YimsbSL9x8_eCTnRGlzH82iDADfuUkt8O7mTMAlYF65iYPtx2O_K-M406MrqzyfovYcMNczC6EOcL4p6ytZ7ViPjlZSuq98bpdulF9tPPquYjkBrXWfky8Y6TSBXmkyV7TWizwrdBU3pyp_5B0JXllIeAQAA

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Memory: 7.61 GB / 11.69 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 22.12.0 - /run/user/1000/fnm_multishells/1080_1735405309856/bin/node
    Yarn: 1.22.22 - /run/user/1000/fnm_multishells/1080_1735405309856/bin/yarn
    npm: 10.9.0 - /run/user/1000/fnm_multishells/1080_1735405309856/bin/npm
  npmPackages:
    svelte: ^5.0.0 => 5.15.0
    webpack: ^5.11.0 => 5.97.1

Severity

blocking all usage of svelte

[paoloricciuti]

This is not an issue, the warning it's correct. If you use bind:this within an if it means that the element might not always be there...if that's the case and you don't use $state when the element is created the variable is assigned but every effect dependent on that variable will not rerun.

see this repl for example

The reason why you are seeing this only when you add $props is because by using $props you are using a rune and the component is in runes mode (the only mode that has this warning).

Closing this but thanks for reporting! 🧡

P.s. just curious: how is a warning blocking all usage of svelte?

[Bilge]

every effect dependent on that variable will not rerun

But there are no effects dependent on the variable.

P.s. just curious: how is a warning blocking all usage of svelte?

Because I need to conditionally bind this element, but I don't need $state, and my project is set up to reject any code that raises warnings.

[paoloricciuti]

But there are no effects dependent on the variable.

Yeah but the warning it's there because there's could be an effect dependent on the variable.

Because I need to conditionally bind this element, but I don't need $state, and my project is set up to reject any code that raises warnings.

You can silence the warning if you are sure that you will never read that in a tracking context (i would not recommend it tho and i would just use $state). If you prefer to silence the warning you can just add this comment on the line before // svelte-ignore non_reactive_update)

[Bilge]

Thank you for the prompt support and sorry for the false report.

[paoloricciuti]

Thank you for the prompt support and sorry for the false report.

No problem at all...thanks to you for reporting!

[Bilge]

	let input: HTMLInputElement = $state(); // <-- this works

Actually, it doesn't, because:

Svelte: Type HTMLInputElement | undefined is not assignable to type HTMLInputElement

But I guess it would be more correct to write:

	let input = $state<HTMLInputElement>(); // <-- this works better

[paoloricciuti]

Oh yeah I was not writing types in the repl 😁