Skip to content

Attribute findParentComponent gets stuck in infinite loop #408

Closed
@SeppahBaws

Description

@SeppahBaws

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'
      }
    }
  ]
};
  1. create a new svelte-kit demo app with npm create svelte@latest, with typescript syntax, and eslint and prettier
  2. add the component below
  3. run npm install
  4. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions