[no-unused-vars] False negative with variables matching HTML element names

[karlhorky]

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.
• I have read the FAQ and my problem is not listed.

Repro

{
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "args": "after-used",
        "ignoreRestSiblings": true,
      },
    ],
  }
}

// False Negative:
// The `div` parameter below is not recognized as an unused variable
function App(div: any) {
  return <div />
}

This also happens with other variables (eg. variables declared separately):

const div = 123;

export function App() {
  return <div />;
}

However, the following correctly warns:

// Any parameter name not matching lowercase HTML tags will be
// correctly recognized as an unused variable
function App(somethingElse: any) {
  return <div />
}

Screenshots

False Negative

Correct Warning

tsconfig.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "UpLeveled Node + React TSConfig",

  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "target": "es2015",

    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "isolatedModules": true,

    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react-jsx",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "strict": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
  "exclude": ["node_modules", "build"]
}

Expected Result

Any variables matching HTML element names should warn and error with @typescript-eslint/no-unused-vars

Actual Result

No errors or warnings for variable names matching HTML element names.

Additional Info

Versions

package	version
@typescript-eslint/eslint-plugin	4.14.1
@typescript-eslint/parser	4.14.1
TypeScript	4.1.2
ESLint	7.18.0
node	15.5.0

[bradzacher]

Here is the related code that should prevent this from happening:

typescript-eslint/packages/scope-manager/src/referencer/Referencer.ts

Lines 519 to 525 in 7b701a3

	if (node.name.type === AST_NODE_TYPES.JSXIdentifier) {
	if (node.name.name[0].toUpperCase() === node.name.name[0]) {
	// lower cased component names are always treated as "intrinsic" names, and are converted to a string,
	// not a variable by JSX transforms:
	// <div /> => React.createElement("div", null)
	this.visit(node.name);
	}

We have a passing test for this:

typescript-eslint/packages/scope-manager/tests/fixtures/jsx/component-intrinsic-name.tsx

Lines 1 to 2 in 7b701a3

	function div() {} // should not be referenced
	<div />;

and associated snapshot:

typescript-eslint/packages/scope-manager/tests/fixtures/jsx/component-intrinsic-name.tsx.shot

Lines 7 to 18 in 7b701a3

	Variable$2 {
	defs: Array [
	FunctionNameDefinition$1 {
	name: Identifier<"div">,
	node: FunctionDeclaration$1,
	},
	],
	name: "div",
	references: Array [],
	isValueVariable: true,
	isTypeVariable: false,
	},

(there's no test for the no-unused-vars rule specifically)

I don't have a checkout handy so I can't look into it right now, but this shouldn't be possible.

[bradzacher]

I'm unable to repro this against master.

[karlhorky]

Very interesting! I'll have to test again...

[karlhorky]

Ok, so I tested with the full config first (it's failing here):

For this file:

const a = 1;

export default function App(div: any) {
  return <div />;
}

It only reports the a warning:

$ yarn eslint .
yarn run v1.22.10
$ /Users/k/p/typescript-eslint-no-unused-vars-jsx-div-repro-full-config/node_modules/.bin/eslint .
Warning: React version was set to "detect" in eslint-plugin-react settings, but the "react" package is not installed. Assuming latest React version for linting.

/Users/k/p/typescript-eslint-no-unused-vars-jsx-div-repro-full-config/src/index.tsx
  1:7  warning  'a' is assigned a value but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (0 errors, 1 warning)

✨  Done in 2.22s.

https://github.com/karlhorky/typescript-eslint-no-unused-vars-jsx-div-repro-full-config

Next I'll try to create a minimal reproduction...

[karlhorky]

Ok, so it appears to be an issue with react/jsx-uses-vars specified in the parent config eslint-config-react-app - I guess it's best to also disable this one!

Sorry about taking your time here!

Closing...

[karlhorky]

Reported in eslint-plugin-react here: jsx-eslint/eslint-plugin-react#2916

[bradzacher]

Thanks for following up! Nice catch on the repro!

Worth noting that shouldn't actually need the react/jsx-uses-vars rule any more if you're using our parser, because it fully understands JSX semantics!!
(yes - it even references React appropriately)

[karlhorky]

Great, glad to help! And thanks for the additional info - will disable this rule permanently in our config.