svelte/no-unnecessary-state-wrap cause unsolvable error with svelte(non_reactive_update)
#11809.23.0
eslint-plugin-svelte
are you using? 3.4.1
In the following code snippet if I remove $state
rune then I get svelte(non_reactive_update)
error, however if I add it I get svelte/no-unnecessary-state-wrap
.
export default ts.config(
includeIgnoreFile(gitignorePath),
js.configs.recommended,
...ts.configs.recommended,
...svelte.configs.recommended,
prettier,
...svelte.configs.prettier,
{
languageOptions: {
globals: { ...globals.browser, ...globals.node }
},
rules: { 'no-undef': 'off' }
},
{
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
ignores: ['eslint.config.js', 'svelte.config.js'],
languageOptions: {
parserOptions: {
projectService: true,
extraFileExtensions: ['.svelte'],
parser: ts.parser,
svelteConfig
}
}
}
);
<script lang="ts">
import { SvelteSet } from 'svelte/reactivity';
import Bug3 from './Bug3.svelte';
let set = new SvelteSet<number>([]);
$effect(() => {
console.log(set);
});
</script>
<Bug3 bind:set />
Not entirely sure
Either of these errors
❯ npm run lint
> svelte-eslint-bug@0.0.1 lint
> prettier --check . && eslint .
Checking formatting...
All matched files use Prettier code style!
svelte-eslint-bug/src/routes/+page.svelte
5:19 error SvelteSet is already reactive, $state wrapping is unnecessary svelte/no-unnecessary-state-wrap
✖ 1 problem (1 error, 0 warnings)
❯ npm run check
> svelte-eslint-bug@0.0.1 check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
====================================
Loading svelte-check in workspace: svelte-eslint-bug
Getting Svelte diagnostics...
/Users/f.nezhivoi/Code/work/svelte-eslint-bug/src/routes/+page.svelte:5:6
Warn: `set` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
https://svelte.dev/e/non_reactive_update (svelte)
let set = new SvelteSet<number>([]);
====================================
svelte-check found 0 errors and 1 warning in 1 fil
``
### Link to **GitHub Repo** with Minimal Reproducible Example
Updated my repo with this issue: https://github.com/gyzerok/svelte-eslint-bug
### Additional comments
_No response_
The footprint seems to be bind:value
in these cases. Cause all the places where it is used seems to be unsolvable
Please use allowReassign
option.
https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unnecessary-state-wrap/#options
@baseballyama thank you, this fixed the problem! Though I am wondering shouldn't the default made by npx sv create
generate a fully working project? Is there a reason allowReassign
is false
by default?
It’s because we can use clear
and add
as alternatives without needing bind or reassign. Using both $state
and SvelteSet
creates a reactive graph that’s one level deeper, potentially causing a slight performance decrease.
However, we’re considering changing the default behavior (which would require a major release). #1154
I am wondering shouldn't the default made by npx sv create generate a fully working project?
@gyzerok Does this mean there are lint errors immediately after generating a project with the sv create
command?
I searched within the CLI project but couldn’t find any $state
usage at all.
https://github.com/search?q=repo%3Asveltejs%2Fcli%20%24state&type=code
@baseballyama ah no, not immediately. What I meant is that you can end up in described situation with the default configuration. If you are just trying svelte
for the first time it might be overwhelming and you might not be able to figure it out. Even though I am using svelte for almost a year it wasn't exactly clear for me that I should manually reconfigure something here. Personally when I use official project creation tool I expect things to just work without any extra configuration required :)
Maybe in this specific case linter could give a bit better error and say "hey, you don't need to use bind: when you are passing SvelteSet inside, just use mutations"?