Skip to content

Incorrect no-undef and @typescript-eslint/no-unused-vars errors for Svelte 5 Snippets #703

New issue

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

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

Already on GitHub? # to your account

Closed
2 tasks done
nicksulkers opened this issue Mar 8, 2024 · 0 comments · Fixed by sveltejs/svelte-eslint-parser#486
Labels
bug Something isn't working feat: svelte v5

Comments

@nicksulkers
Copy link

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

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

2.36.0-next.4

What did you do?

Configuration
/** @type { import("eslint").Linter.Config } */
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">
	const mySnippetInDisguise = mySnippet;
</script>

{#snippet mySnippet()}
	<p>Hello World!</p>
{/snippet}

{@render mySnippetInDisguise()}

What did you expect to happen?

No errors.

What actually happened?

ESLint reported two contractory errors:

  • Line 2:22 reported an error: 'mySnippet' is not defined (no-undef).
  • Line 5:11 reported an error: 'mySnippet' is defined but never used (@typescript-eslint/no-unused-vars).

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/nicksulkers/eslint-svelte5-snippets-bug-repro

Additional comments

My initial assumption is that snippets in Svelte 5 act like hoisted functions. However, it appears that ESLint does not recognize them as such. As a result, when these snippets are utilized within a <script> tag, ESLint mistakenly identifies them as undefined. Moreover, following their declaration, ESLint incorrectly marks them as unused.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
bug Something isn't working feat: svelte v5
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants