[Bug]: react/prop-types false positive when using React.ComponentProps #3651
Description
Is there an existing issue for this?
- I have searched the existing issues and my issue is uniqueMy issue appears in the command-line and not only in the text editor
Description Overview
When using certain React types in TypeScript, such as React.ComponentProps, the react/prop-types rule will trigger a false positive when using a property from that type.
import React from "react";
// ERROR
export function LinkWithComponentProps(props: React.ComponentProps<"a">) {
return <a href={props.href}>My link</a>;
// ^ 'href' is missing in props validation eslint(react/prop-types)
}
// ERROR
type TypeProps = React.ComponentProps<"a">;
export function LinkWithTypeProps(props: TypeProps) {
return <a href={props.href}>My link</a>;
// ^ 'href' is missing in props validation eslint(react/prop-types)
}
// NO ERROR
interface InterfaceProps extends React.ComponentProps<"a"> {}
export function LinkWithInterfaceProps(props: InterfaceProps) {
return <a href={props.href}>My link</a>;
}Linting the above code using eslint . --ext .tsx gives the following error:
/path/to/eslint-test/test.tsx
5:27 error 'href' is missing in props validation react/prop-types
12:27 error 'href' is missing in props validation react/prop-types
Using the following versions:
"@types/react": "^18.2.37",
"@typescript-eslint/parser": "^6.10.0",
"eslint": "^8.53.0",
"eslint-plugin-react": "^7.33.2",
"typescript": "^5.2.2"And the following configuration:
module.exports = {
env: { browser: true, node: true },
extends: ["plugin:react/recommended"],
parser: "@typescript-eslint/parser",
settings: {
react: { version: "detect" },
},
plugins: ["react"],
};Expected Behavior
Using React.ComponentProps<"a"> or similar types such as ComponentPropsWithRef and ComponentPropsWithoutRef directly as types should not result in an error, and should work the same way as defining an interface that extends these types.
A minimal reproduction repository can be shared if needed.
eslint-plugin-react version
v.7.33.2
eslint version
v8.53.0
node version
v20.9.0
Metadata
Metadata
Assignees
Type
Projects
Milestone
Relationships
Participants
Activity
ljharb commentedon Nov 13, 2023
I'd never heard of either of those built-in types, so we'd have to build support for them before they can be understood statically.
branko-d commentedon Dec 1, 2023
Another example of a false positive:
error 'style' is missing in props validation react/prop-types
Despite that, hovering over
styleshows its type:React.CSSProperties | undefined, and everything builds as expected.If it matters, here is an excerpt from my package.json:
ljharb commentedon Dec 1, 2023
The hover is the typescript language server; again, we’d need to hardcode support for those types (or, the TS eslint parser would need to attach the type information to the AST nodes) to be able to support them.
burtek commentedon Jan 9, 2024
Honestly, I don't think there is a point in using eslint for type-checking TS prop types as TS already does this. That being said
pretty sure you can extract that info from AST one way or another if eslint config has type linting enabled
corydeppen commentedon Dec 28, 2024
I think this may have been mostly resolved by #3859, but it looks like
ComponentPropsWithRefis still subject to this issue and may need to be added to the list of allowed generic types.@ljharb I'd be happy to submit a PR if you can confirm it's appropriate.
ljharb commentedon Dec 28, 2024
@corydeppen with tests, that sounds great :-)
Update dependency eslint-plugin-react to v7.37.5
Update dependency eslint-plugin-react to v7.37.5
26 remaining items