Description
Before You File a Bug Report Please Confirm You Have Done The Following...
- I'm using eslint-plugin-svelte. (
*.svelte
file linting does not work with the parser alone. You should also use eslint-plugin-svelte with it.) - I'm sure the problem is a parser problem. (If you are not sure, search for the issue in eslint-plugin-svelte repo and open the issue in eslint-plugin-svelte repo if there is no solution.
- 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.50.0
What version of eslint-plugin-svelte
and svelte-eslint-parser
are you using?
- svelte-eslint-parser@0.33.0
- eslint-plugin-svelte@2.33.2
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'
}
}
]
};
- create a new svelte-kit demo app with
npm create svelte@latest
, with typescript syntax, and eslint and prettier - add the component below
- run
npm install
- run
npx eslint "src/**/*.svelte"
<script lang="ts">
export let collapsed = false;
</script>
<div>
{#if !collapsed}
<svelte:self collapsed let:something>
<slot {something} />
</svelte:self>
{/if}
</div>
What did you expect to happen?
I expected eslint to parse the file properly and show me any issues
What actually happened?
I left the command run for a while, but nothing happened.
When I ran it in VS Code's js debug terminal and stopped it, I saw that it was getting stuck inside the while (parent && parent.type !== "SvelteElement")
loop in attr.ts @ function findParentComponent.
Link to GitHub Repo with Minimal Reproducible Example
https://github.com/SeppahBaws/svelte-eslint-parser-infinite-loop
the component causing the infinite loop is in src/lib/Recursive.svelte
Additional comments
Looking a bit closer at the code, it seems like it's trying to walk the node tree upwards, but accidentally reassigns parent
with the exact same value it already has (node.parent
), thus ending up in an infinite loop.
I fixed it locally by replacing the line in the while loop with parent = parent.parent
in the attr.js file inside node_modules. However I'm not familiar with this codebase, so when I tried to apply the same fix inside the attr.ts file in this repo, TypeScript was complaining about mismatching types.