eslint-plugin-react
eslint-plugin-react copied to clipboard
jsx-eslint
Bug: `no-unused-prop-types` doesn't detect unused props with Typescript & React 17 jsx transform
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 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.
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?
When using import type {VFC} from 'react', the unused props are reported 👍
