svelte-ignore reactive-component not working

[probablykasper]

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.24.0

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

3.5.1

What did you do?

Configuration

Default from sv create:

import js from '@eslint/js';
import { includeIgnoreFile } from '@eslint/compat';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import { fileURLToPath } from 'node:url';
import ts from 'typescript-eslint';
import svelteConfig from './svelte.config.js';

const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));

export default ts.config(
	includeIgnoreFile(gitignorePath),
	js.configs.recommended,
	...ts.configs.recommended,
	...svelte.configs.recommended,
	{
		languageOptions: {
			globals: { ...globals.browser, ...globals.node }
		},
		rules: { // typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
		// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
		"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 { onMount } from 'svelte'

	let MyComponent: typeof import('./MyComponent.svelte').default | undefined
	onMount(() => {
		import('./MyComponent.svelte').then((component) => {
			MyComponent = component.default
		})
	})
</script>

{#if MyComponent}
	<!-- svelte-ignore reactive-component -->
	<MyComponent />
{/if}

What did you expect to happen?

No errors, because this comment works to successfully ignore the reactive-component runtime warning

What actually happened?

Gives this error:

svelte-ignore comment is used, but not warned svelte/no-unused-svelte-ignore

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/probablykasper/svelte-ignore-reactive-component-bug

Additional comments

No response

[ota-meshi]

Thank you for this report.
I didn't know that svelte-ignore comments can suppress runtime warnings. But eslint-plugin can't get runtime warnings statically, so I don't know how to solve that 😓
I hope someone has some good ideas 🤔

For now, I think the only workaround is to disable the svelte/no-unused-svelte-ignore rule.

[probablykasper]

If it's not a lint that the plugin concerns itself with, then I think the sensible thing is to whitelist it

This workaround does indeed work:

<!-- eslint-disable-next-line svelte/no-unused-svelte-ignore -->
<!-- svelte-ignore reactive-component -->

[ota-meshi]

I think it would be a good idea to have a whitelist. Is it possible to create the whitelist?

[probablykasper]

Yeah I'm sure it could be done in here
https://github.com/sveltejs/eslint-plugin-svelte/blob/ad528c9b9136825cf2003206df105cc87153bdc6/packages/eslint-plugin-svelte/src/rules/no-unused-svelte-ignore.ts

[ota-meshi]

I guess I didn't explain it well.
Is it possible to list rules to be whitelisted?
What rules should be listed besides the reactive-component rule? Or are there no rules other than reactive-component?

[probablykasper]

I'm not sure. I found this list of compiler warnings here (from Svelte 3), but I assume it's hard to tell which would be runtime warnings: https://github.com/sveltejs/svelte/blob/v3.59.2/src/compiler/compile/compiler_warnings.ts

[ota-meshi]

Yeah. I wish we could figure out which ones are runtime warnings...

[probablykasper]

I think there's no easy way tbh

[ota-meshi]

@baseballyama Do you have any ideas?

[baseballyama]

reactive-component is a compile-time warning, and we can actually get the warning when compiling with the Svelte Compiler without comments.
Therefore, I suspect that it’s simply a bug in eslint-plugin-svelte.

Also, I don’t think there’s a way to suppress runtime warnings using comments.
If the official documentation mentions such a method, could you please share the link?

[ota-meshi]

I said it was a runtime warning, but that's wrong. It's actually a rendering warning.
However, this warning doesn't appear at compile() time, so svelte-check doesn't warn we about it either.

https://github.com/sveltejs/svelte/blob/d8b31333ec4afeab7dd178aedc7c187bfb971531/packages/svelte/src/compiler/compile/render_dom/wrappers/InlineComponent/index.js#L121

[baseballyama]

I confirmed that I could actually get the warning by running the following code after removing the comment.

import { compile } from 'svelte/compiler';
import { readFileSync } from 'fs';

const main = () => {
    const file = readFileSync('./src/routes/+page.svelte', {encoding: 'utf8'});
    console.log(compile(file))
}

main();

[ota-meshi]

Hmm... something seems different from what I've tried 😓 I'll look into it some more.

[ota-meshi]

It looks like I was trying with the following code, I forgot what generate: false meant so I'll look into it a bit more.

import { compile } from 'svelte/compiler';
import { readFileSync } from 'fs';

const main = () => {
    const file = readFileSync('./src/routes/+page.svelte', {encoding: 'utf8'});
    console.log(compile(file, {generate: false}))
}

main();