Skip to content

svelte-ignore reactive-component not working #1192

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
2 tasks done
probablykasper opened this issue Apr 9, 2025 · 20 comments · May be fixed by #1208
Open
2 tasks done

svelte-ignore reactive-component not working #1192

probablykasper opened this issue Apr 9, 2025 · 20 comments · May be fixed by #1208

Comments

@probablykasper
Copy link

probablykasper commented Apr 9, 2025

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
Copy link
Member

ota-meshi commented Apr 9, 2025

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
Copy link
Author

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
Copy link
Member

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

@probablykasper
Copy link
Author

probablykasper commented Apr 9, 2025

@ota-meshi
Copy link
Member

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
Copy link
Author

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
Copy link
Member

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

@probablykasper
Copy link
Author

I think there's no easy way tbh

@ota-meshi
Copy link
Member

@baseballyama Do you have any ideas?

@baseballyama
Copy link
Member

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
Copy link
Member

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
Copy link
Member

baseballyama commented Apr 10, 2025

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();
Image

@ota-meshi
Copy link
Member

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

@ota-meshi
Copy link
Member

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();

@ota-meshi
Copy link
Member

The documentation says that generate: false is useful for tooling.

Useful for tooling that is only interested in warnings.

https://svelte.dev/docs/svelte/svelte-compiler#ModuleCompileOptions

I think I probably used generate: false based on the code in eslint-plugin-svelte3.

https://github.com/sveltejs/eslint-plugin-svelte3/blob/92671bee83b1d38979e1b0f2897a987cbd61b808/src/preprocess.js#L245

Shouldn't we use generate: false? 🤔

@baseballyama
Copy link
Member

The Svelte compiler mainly consists of three steps: parsing, validation, and transform, and it seems that this warning is generated during the transform step.
So, it might be necessary to set generate: true even though it comes with a performance cost.

@baseballyama
Copy link
Member

The documentation says that generate: false is useful for tooling.

This is Svelte5 document, but the OP uses Svelte3/4.
(The same thing might happen in Svelte 5 as well, but I haven’t tested it yet.)

@ota-meshi
Copy link
Member

@baseballyama
Copy link
Member

I tried the same thing in Svelte 5, but no warning was emitted.
(It seems that the reactive_component warning doesn’t exist in Svelte 5.)

@ota-meshi
Copy link
Member

I think reactive-component is probably the only special warning emitted in the render (transform) phase in Svelte 4.

I think it would make sense for us to change the svelte/no-unused-svelte-ignore rule to ignore only reactive-component.

We might be able to lint correctly by removing generate: false, but I think that's probably not what Svelte core intends.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants