Error with prefer-const rule

Tell us about your environment

Environment Info:

Node version: v16.4.2 npm version: v7.18.1 Local ESLint version: v7.27.0 (Currently used) Global ESLint version: Not found Operating System: darwin 20.6.0

What parser (default, @babel/eslint-parser, @typescript-eslint/parser, etc.) are you using?

"parser": "@typescript-eslint/parser"

Please show your full configuration:

Configuration

{
  "parser": "@typescript-eslint/parser",
  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "prettier"],
  "plugins": ["@typescript-eslint", "react-hooks", "prettier"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {"jsx": true}
  },
  "rules": {
    "@typescript-eslint/ban-types": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-member-accessibility": ["off"],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/member-ordering": [
      "error",
      {
        "default": {
          "memberTypes": [
            "public-static-field",
            "protected-static-field",
            "private-static-field",
            "public-static-method",
            "protected-static-method",
            "private-static-method",
            "public-instance-field",
            "protected-instance-field",
            "private-instance-field",
            "public-abstract-field",
            "protected-abstract-field",
            "private-abstract-field",
            "public-constructor",
            "protected-constructor",
            "private-constructor",
            "public-instance-method",
            "protected-instance-method",
            "private-instance-method",
            "public-abstract-method",
            "protected-abstract-method",
            "private-abstract-method"
          ],
          "order": "as-written"
        }
      }
    ],
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/no-empty-interface": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-inferrable-types": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/no-use-before-define": ["error", "nofunc"],
    "no-async-promise-executor": "off",
    "arrow-body-style": "off",
    "eqeqeq": ["error", "smart"],
    "no-console": ["error", {"allow": ["info"]}],
    "no-duplicate-imports": ["error"],
    "no-useless-computed-key": ["error"],
    "no-useless-rename": ["error"],
    "no-var": ["error"],
    "no-fallthrough": "off",
    "object-shorthand": ["error"],
    "prefer-const": ["error"],
    "prefer-arrow-callback": "off",
    "prettier/prettier": "error",
    "react-hooks/exhaustive-deps": ["off"],
    "react-hooks/rules-of-hooks": ["error"],
    "react/display-name": "off",
    "react/jsx-boolean-value": ["error", "never"],
    "react/jsx-curly-brace-presence": ["error", {"props": "never", "children": "ignore"}],
    "react/jsx-fragments": ["error", "syntax"],
    "react/jsx-no-target-blank": "off",
    "react/no-unescaped-entities": ["off"],
    "react/prop-types": "off",
    "require-yield": "off"
  },
  "settings": {
    "react": {"version": "detect"}
  },
  "overrides": [
    {
      "files": ["**/module/*/*/index.ts", "**/module/*/*/index.tsx", "**/module/main/index.ts", "**/module/main/index.tsx"],
      "rules": {
        "@typescript-eslint/explicit-function-return-type": ["error"]
      }
    }
  ]
}

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

        let timer: NodeJS.Timeout;

        const clear = () => {
            clearInterval(timer);
            // other code
            window.location.reload();
        };

        const child = window.open("example.com", "Login", "toolbar=no,scrollbars=yes,resizable=yes");

        const checkChild = () => {
            if (child && child.closed) {
                clear();
            }
        };

        timer = setInterval(checkChild, 500);

(I have the configuration in a different file and in the root I have a reference to that file as well. Like it’s shown in this project)

eslint -c webpack/lint/.eslintrc.json \"{src,test}/**/*.{ts,tsx}\"

What did you expect to happen? The code should open a window and check with an interval of 500 check if the new opened page is closed to run the code inside clear.

What actually happened? Please copy-paste the actual, raw output from ESLint. The eslint configuration throws an error claiming that timer should be a const when I’m assigning it at the end of my code example. And due to the rules I have configures if I move the functions around it will throw errors that the variables are being used before they are declared. Output:

23:13 error ‘timer’ is never reassigned. Use ‘const’ instead prefer-const

✖ 1 problem (1 error, 0 warnings)

Steps to reproduce this issue:

1. Copy the configurations I have inserted here for a react / typescript project
2. Create a new react function component
3. Copy the code I added here and run eslint check

Are you willing to submit a pull request to fix this bug?

[mdjermanovic]

Thanks for the info! Per the thumbs up reaction on https://github.com/eslint/eslint/issues/15022#issuecomment-912360438 it seems that the original problem has been resolved as well, so I’m closing this issue.

[mdjermanovic]

@Shinigami92 your example is different because there’s assignment in an inner scope, and that would be a bug.

I think the cause is same as in https://github.com/eslint/eslint/issues/14977, you’re using ecmaVersion: 'latest' with @typescript-eslint/parser which doesn’t support that value, so the scope analysis is done as if it was es5 code (without block scopes). The solution is to not use 'latest' with @typescript-eslint/parser because it’s not a valid option for that parser.