svelte/no-unnecessary-state-wrap cause unsolvable error with svelte(non_reactive_update)

[gyzerok]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.

What version of ESLint are you using?

9.23.0

What version of eslint-plugin-svelte are you using?

3.4.1

What did you do?

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.

Configuration

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 />

What did you expect to happen?

Not entirely sure

What actually happened?

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_

[gyzerok]

The footprint seems to be bind:value in these cases. Cause all the places where it is used seems to be unsolvable

[baseballyama]

Please use allowReassign option.

https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unnecessary-state-wrap/#options

[gyzerok]

@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?

[baseballyama]

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

[baseballyama]

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

[gyzerok]

@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"?