Bug: `no-unused-vars` thinks a lowercase name is used in JSX element tag

Environment

Node version: v14.17.5 npm version: v6.14.14 Local ESLint version: Not found Global ESLint version: Not found Operating System: darwin 20.6.0

What parser are you using?

@babel/eslint-parser

What did you do?

const unused = () => {};
function Example() {
  return <unused />;
}

What did you expect to happen?

According to the JSX spec, the output createElement call disambiguates between component references (JS) and string tag names (DOM) depending on the first letter of a name being capitalized:

// input
<Capitalized />
<lowercase />

// output
createElement(Capitalized);
createElement("lowercase");

Thus, a lowercase identifier should not be considered used when it’s only part of a JSX tag.

The previous example (“what did you do?”) should report a no-unused-vars error.

What actually happened?

The example does not report a no-unused-vars error.

Participation

• I am willing to submit a pull request for this issue.

[mdjermanovic]

Thanks!

As you’ve already noticed (and prepared a PR in eslint-plugin-react), this is an issue with the react/jsx-uses-vars rule.

no-unused-vars itself does not treat JSX identifiers as references because that’s React-specific JSX semantics, so this would be, by default, a reported error on the lowercase variable, which is observable when you disable react/jsx-uses-vars rule.

However, no-unused-vars has an additional feature - other rules can mark variables as used, and no-unused-vars will not report those variables. In this case, react/jsx-uses-vars marks the lowercase variable as used.

I’m closing this issue since this isn’t a problem in the core rule.

[alanorozco]

I encountered this on a larger repo and was initially unaware that this was triggered by the react plugin.

Thank you for your help in finding the culprit!