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

[TristanHessellHyper]

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.

[ljharb]

If you have React.VFC in the file, how can you not be importing React?

[TristanHessellHyper]

@ljharb the code uses the react 17 jsx transform, which doesn't require React to be imported: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports.

In TypeScript, React isn't required to be imported (when used as a type namespace) if the compiler option is set.

[ljharb]

I'm aware of the jsx transform; i was not aware TS allowed sloppy type imports with any options provided.

If you explicitly import type the VFC type, what happens?

[TristanHessellHyper]

When using import type {VFC} from 'react', the unused props are reported 👍

[himanshu007-creator]

Hi, I would like to work on this issue @ljharb

[ljharb]

Go for it!