Generic declarations in components not recognized by ESLint

[MathiasFrost]

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?

8.43.0

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

2.10.1

What did you do?

Configuration

module.exports = {
	root: true,
	extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:svelte/recommended", "prettier"],
	parser: "@typescript-eslint/parser",
	plugins: ["@typescript-eslint"],
	parserOptions: {
		sourceType: "module",
		ecmaVersion: 2020,
		extraFileExtensions: [".svelte"]
	},
	env: {
		browser: true,
		es2017: true,
		node: true
	},
	overrides: [
		{
			files: ["*.svelte"],
			parser: "svelte-eslint-parser",
			parserOptions: {
				parser: "@typescript-eslint/parser"
			}
		}
	]
};

<script lang="ts" generics="T">
	import { createEventDispatcher } from "svelte";

	// Or type T = $$Generic; (same result)

	/** */
	const dispatch = createEventDispatcher<{ change: Promise<T> }>();

	export let value: T;

	/** */
	function test(): void {
		const promise = new Promise<T>((resolve) => resolve(value));
		dispatch("change", promise);
	}
</script>

What did you expect to happen?

That ESLint would be able to interpret the symbol T

What actually happened?

ESLint is not able to interpret the symbol T:

   6:59  error    'T' is not defined                     no-undef
   8:20  error    'T' is not defined                     no-undef

Link to GitHub Repo with Minimal Reproducible Example

playground

Additional comments

Note that this is not an issue in eslint-plugin-svelte3.

Also don't know if generic="T" attribute or type T = $$Generic declaration is the preferred way of dealing with generics in components, but both seem to not work.

[christophsturm]

generics="T" is the new syntax and type T = $$Generic is the old one. both seem to not work. the old syntax works with eslint-plugin-svelte3. my workaround is to go back to eslint-plugin-svelte3 and the old syntax for now.

[ota-meshi]

As for adding support for Generic, it's strictly a parser issue.
Follow sveltejs/svelte-eslint-parser#306.

[MathiasFrost]

As for adding support for Generic, it's strictly a parser issue. Follow sveltejs/svelte-eslint-parser#306.

I'm not sure I understand. Is this a svelte-eslint-parser issue then? And if so, why is eslint-plugin-svelte3 the only enabling the use of $$Generic?

[ota-meshi]

eslint-plugin-svelte3 and eslint-plugin-svelte are completely separate packages. eslint-plugin-svelte3 does not use svelte-eslint-parser. If you want immediate support, please submit a pull request.

[BeeMargarida]

I hit this problem as well. Is there a workaround for now?
If someone points me in the right direction, I would like to help with a fix.

[MathiasFrost]

I hit this problem as well. Is there a workaround for now? If someone points me in the right direction, I would like to help with a fix.

The workaround is just not using it and going back to eslint-plugin-svelte3, like @christophsturm said.

[MathiasFrost]

I hit this problem as well. Is there a workaround for now? If someone points me in the right direction, I would like to help with a fix.

I took a brief look and think it looks like eslint-plugin-svelte3 is just ignoring the no-undef error and letting the svelte language tools handle it (?), in which case svelte-eslint-parser just has to do the same?

I am also not sure how "set in stone" this generics-declaration-by-attributes is, considering it is a PR on svelte repo atm, as well as this warning on svelte.dev

[ota-meshi]

If you just want to avoid the $$Generic variable being flagged for no-undef rule, just set it to globals in the ESLint configuration.

https://eslint.org/docs/latest/use/configure/language-options#using-configuration-files-1

[ota-meshi]

Follow sveltejs/svelte-eslint-parser#306 on this subject. I will lock this thread.