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

@ljharb upgrading to the latest version 7.21.1 fixes this

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)

Using eslint-plugin-react@7.20.3 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.

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

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.

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

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

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

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.

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.

@zakur777 just like the last three comments; please file a new issue?

Hi @ljharb,

Would you know how to fix this issue without disable the eslint rule? I really wish this error can be fixed: (FYI, I am using typescript and material-ui)

@DamengRandom then please file a new issue?

in v7.22.0 this problem continues! I did downgrade to cited versions, but the issue persists. 😢

moved my comment to new issue

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!

@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”.

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. 🤷‍♂️