jsx-eslint/eslint-plugin-react

Bug: `no-unused-prop-types` doesn't detect unused props with Typescript & React 17 jsx transform

Open

#3336 opened on Jul 13, 2022

View on GitHub
 (6 comments) (1 reaction) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
bughelp wantedtypescript

Description

The rule react/no-unused-prop-types doesn't seem to pick up that the component has unused props.

Environment:

Dependencies:

"typescript": "4.6.3",
"eslint-plugin-react": "7.30.1",
"@typescript-eslint/eslint-plugin": "5.29.0",
"@typescript-eslint/parser": "5.29.0",

eslintrc.js

module.exports = {
  rules: [
    'react/no-unused-prop-types': 'error',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 11,
    project: './tsconfig.json',
  },

tsconfig.json

{
  "compilerOptions": {
   /* other config doesn't seem to matter*/
    "jsx": "react-jsx",
  },
}

Example Code

  type Props = {
    username: string;
  }

  const App: React.VFC<Props> = (props) => {
    return <div></div>;
  }

Expected Outcome

Lint error with message 'username' PropType is defined but prop is never used.

Actual Outcome

No error message.

If I change the code to have import React from 'react' at the top of the file, the rule works as expected.

Contributor guide

Tech stack
typescriptreact
Domain
frontenddeveloper experience
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
TypeScriptReactESLintReact JSX transform
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Investigate the root cause of why `react/no unused prop types` fails to detect unused props when using TypeScript with the React 17 automatic JSX transform (jsx: 'react jsx'). The workaround indicates that adding an explicit `import React from 'react'` enables detection, suggesting the issue lies in how the rule identifies the React import or processes TypeScript types without the explicit import. Examine the rule's source code in `lib/rules/no unused prop types.js` and related utilities for parsing prop types. Check if the new JSX transform alters the AST structure (e.g., missing `JSXIdentifier` for `React`) that the rule relies on.