jsx-uses-vars breaks eslint prefer-const

[lukeapage]

I have code like this

function X(props) {
    const { filterList } = props;

    let filters = _.chain(filterList)
        .map((filter, index) =>
            <Z/>
        )
        .value();

    return (
        <div>
            {filters}
        </div>
    );
}

but with prefer-const on, the prefer const error on filters is removed when I switch on jsx-uses-vars

[lukeapage]

I created a repro repo..
https://github.com/lukeapage/eslint-react-bug-prefer-const-716

[yannickcr]

Thanks for the issue, but if I'm right there is nothing we can do on our side to prevent this, since the issue seems to come from ESLint itself (eslint/eslint#5837), right?

[ljharb]

It sounds like with prefer-const there's a (correct) error, and with prefer-const + jsx-uses-vars, there's (incorrectly) not an error.

[yannickcr]

prefer-const is ignoring variables with eslintUsed set on it. Since that's how we mark a variable as used in ESLint I don't see what we can do here 😐

But:

• We mark JSXOpeningElement (<App />) and JSXExpressionContainer ({filters}) as used but ESLint seems to correctly handle JSXExpressionContainer without the help of this rule. Maybe we could remove this? (All tests are still passing without it, but maybe we're missing a pattern?)

This will solve the case described by @lukeapage but we'll still have the problem with JSXOpeningElement:

let App = <div />; // should warn "'App' is never reassigned. Use 'const' instead" but will not
<App />

• Apparently they are not sure if this check on eslintUsed is still useful (prefer-const not triggered (regression from 2.4.0) eslint/eslint#5837 (comment)), so maybe they will remove it? In this case it would solve the entire problem.

[lukeapage]

Yeah sorry for not updating after tracking down.

I left this open until a solution is found, in case something needs to be done here as welll.

[Wilfred]

I hit this today. A minimal repro:

function foo() {
  let iCouldBeConst = 6;
  return <th colSpan={iCouldBeConst}></th>;
}

and eslint config:

{
    "parserOptions": {
        "ecmaVersion": 6,
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "rules": {
        "react/jsx-uses-vars": 2,
        "prefer-const": 2
    },
    "plugins": [
        "react"
    ]
}

Sounds like removing eslintUsed on JSXExpressionContainer would be a definite improvement, since that would fix both my situation and OP.

[yannickcr]

Sounds like removing eslintUsed on JSXExpressionContainer would be a definite improvement, since that would fix both my situation and OP.

Yes, I will remove this. It does not fix the whole issue with prefer-const but it's better than nothing for now.

[yannickcr]

Keep it open for now due to #716 (comment)

[Wilfred]

Thanks :)

[yannickcr]

Fixed in ESLint 3.4.0