Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork2.7k
Closed
Description
Is there an existing issue for this?
- I have searched the existing issues and my issue is unique
- My issue appears in the command-line and not only in the text editor
Description Overview
When using certain React types in TypeScript, such asReact.ComponentProps, thereact/prop-types rule will trigger a false positive when using a property from that type.
importReactfrom"react";// ERRORexportfunctionLinkWithComponentProps(props:React.ComponentProps<"a">){return<ahref={props.href}>Mylink</a>;// ^ 'href' is missing in props validation eslint(react/prop-types)}// ERRORtypeTypeProps=React.ComponentProps<"a">;exportfunctionLinkWithTypeProps(props:TypeProps){return<ahref={props.href}>Mylink</a>;// ^ 'href' is missing in props validation eslint(react/prop-types)}// NO ERRORinterfaceInterfacePropsextendsReact.ComponentProps<"a">{}exportfunctionLinkWithInterfaceProps(props:InterfaceProps){return<ahref={props.href}>Mylink</a>;}
Linting the above code usingeslint . --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-typesUsing 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
UsingReact.ComponentProps<"a"> or similar types such asComponentPropsWithRef andComponentPropsWithoutRef directly astypes 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