Eslint-plugin-react: '(react/prop-types): Missing in props validation' when props interface extends from another

[ggd543]

code snippet

import React, { SFC } from 'react';

const mapDispatch = (dispatch: storeDispatch) => ({
   removeCollection: dispatch.infoLibTable.removeCollection,
});

interface InfoLibTableProps extends ReturnType<typeof mapDispatch> {
}

const App: SFC<InfoLibTableProps> = (props) => {
   props.removeCollection(); 
}

.eslintrc

{ 
  "plugins": [ "eslint-plugin-react"]
}

when running eslint , I got the following warning:
warning 'removeCollection' is missing in props validation react/prop-types

[srittau]

I also get this error for x with the following code since today's run of "yarn upgrade":

interface Foo {
    x: number;
}

interface Bar extends Foo {
    y: string;
}

const Baz = ({ x, y }: Bar) => (
    <span>
        {x}
        {y}
    </span>
);

While yarn upgrade also upgraded eslint-plugin-react from 7.20.0 to 7.20.1, this doesn't seem to be the root cause if this error. Manually downgrading it to 7.20.0 or 7.19.0 still gives this error. I suspect it is due to one of eslint-plugin-react's dependencies.

[srittau]

This error actually occurs a second time in our code base after the upgrade:

function useBar(): { x: number; y: string } {
    return { x: 123, y: "" };
}

const Foo = () => {
    const props = useBar();
    return <span>{props.x}</span>; // 'x' is missing in props validation 
};

Renaming props to something more sensible fixes this, but maybe it's a hint for what's going on.

[jacogr]

So worked around all these changing all my extends. Now on the latest version now seems complains when the props are defined but the component returns React.ReactElement<Props> | null - with the | null it just breaks all over again. An example -

interface Props {
  value?: string;
}

// without the | null, all ok, with it, it is broken
function Test ({ value }: Props): React.ReactElement<Props> | null {
  if (!value) {
    return null;
  }

  return <div>{value}</div>;
}

Additionally, this is also problematic (was working before most recent update to .3, same as above) -

import { ComponentProps as Props } from './types';

function Test ({ className = '' }: Props): React.ReactElement<Props> {
  return <div className={className}>something</div>;
}

[einsiol]

I'm also having this problem using React.FunctionalComponent, would be great to have this supported. My issue is as follows:

type Props = {
    title: string;
    name?: string;
};
const Component: React.FC<Props> = ({title, name}) => (...)

This will give me the error that the props validation is missing

'...' is missing in props validation eslint(react/prop-types)

[drodriguln]

I'm also having this problem using React.FunctionalComponent, would be great to have this supported. My issue is as follows:

type Props = {
    title: string;
    name?: string;
};
const Component: React.FC<Props> = ({title, name}) => (...)

This will give me the error that the props validation is missing

'...' is missing in props validation eslint(react/prop-types)

I had the same problem. Turns out it didn't like me returning a ternary. 🤷‍♂️

[aplassen]

@drodriguln, same thing for me 🤔

[aplassen]

Also, in other cases, I also get the error described in this issue related to extended props.

[goooseman]

By downgrading back to 7.20.0 (without downgrading any of libraries deps) the problem is resolved, so I believe the problem appeared somewhere between 7.20.1 and 7.20.0

[goooseman]

And it looks like the problem is already solved in the upstream: https://github.com/yannickcr/eslint-plugin-react/commit/4ee6f8e1ff15f89596e6c0249a21275a92052e58

[ljharb]

@goooseman that's included in v7.20.3. Have you tried that version?

[goooseman]

Yep, I've tried. And it was throwing the error, if Typescript interface has been used.

[ljharb]

@goooseman could you provide a reduced test case that's incorrect in the latest version?

[Multiply]

Using [email protected] we are also seeing the issue.

Example:

interface GenericProps {
  onClose: () => void
}

interface ImplementationProps extends GenericProps {
  onClick: () => void
}

export const Implementation: FC<ImplementationProps> = (
  {
    onClick,
    onClose,
  }: ImplementationProps
) => (
  // ... implementation here
)

It'll complain about the prop from the extended interface onClose missing in props validation.

[einsiol]

By downgrading back to 7.20.0 (without downgrading any of libraries deps) the problem is resolved, so I believe the problem appeared somewhere between 7.20.1 and 7.20.0

The issue I was having was on 7.20.0. I tried to update to 7.20.3, latest version but made no difference for the problem I mentioned above. That is, of course, a typescript issue, maybe there needs to be a different issue made for that?

[hank121314]

For those who encounter this issue.
If you don't mind, could you please help me to test the extends feature in my develop branch
https://github.com/hank121314/eslint-plugin-react/tree/develop
It might resolve this issue.

[StallionV]

Reason: Seems like if you have used the word "props" in your objects this error gets triggered
e.g. {name: "", props: {..} }
Those looking for a quick fix.
Reverting version back to : 7.16.0
and deleting your package-lock.json, node modules directory and then doing npm install fixed this for us

PS: we tried downgrading to 7.20 and even 7.18 but were still getting the same error
But this needs an immediate fix to stop builds from breaking.

[Cretezy]

The upgrade from 7.20.0 -> 7.20.1 seems to be causing the issue for me.

[aaronlna]

The upgrade from 7.20.0 -> 7.20.1 seems to be causing the issue for me.

Yup. Downgrading back to 7.20.0 resolved this for me.

[damiangreen]

do we know which version this will be released in?

[ljharb]

@damiangreen if you click on the commit that closed the PR, you'll see it's not released in anything yet. So, the answer to your question is "the next release".

[S-Amin]

I just tested the version 7.20.6 and still the same error.
this is my package dependency

        "eslint": "^7.7.0",
        "eslint-config-airbnb-typescript": "^9.0.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-plugin-import": "^2.22.0",
        "eslint-plugin-jsx-a11y": "^6.3.1",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-react": "^7.20.6",
        "eslint-plugin-react-hooks": "^4.0.8",

this is the eslint consfig file

{
    "env": {
        "browser": true,
        "es2020": true
    },
    "extends": [
        "airbnb-typescript",
        // "eslint:recommended",
        // "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier",
        "prettier/react",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": "./tsconfig.json",
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": ["react", "@typescript-eslint"],
    "rules": {
        "prettier/prettier": ["error"],
        "react/react-in-jsx-scope": "off",
        "import/prefer-default-export": "warn",
        "no-underscore-dangle": "off",
        "no-nested-ternary": "off",
        "@typescript-eslint/no-empty-interface": "warn",
        "@typescript-eslint/naming-convention": [
            "error",
            {
                "selector": "interface",
                "format": ["camelCase", "UPPER_CASE", "PascalCase"]
            }
        ]
    }
}

and there are multiple components that eslint threw this error ... is missing in props validation

[ljharb]

@S-Amin thanks; could you file a new issue?

[chidioguejiofor]

@ljharb upgrading to the latest version 7.21.1 fixes this

[maxie7]

version 7.21.5 >> the same issue && the same error

[ljharb]

@maxie7 can you file a new issue for that?

[maxie7]

The problem was solved by installing "prop-types" v15.7.2 for React v17.0.1. So, it's not a bug, I think. Good luck with eslint plugin, it's awesome!

[aximusnl]

moved my comment to new issue

[Siphenathi-Nathi]

For me, upgrading eslint-plugin-react to the latest version 7.21.5 fixed this