Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: react/prop-types false positives since upgrading typescript-eslint to v8 #3796

Closed
2 tasks done
dan-serendipity opened this issue Aug 7, 2024 · 4 comments
Closed
2 tasks done

Comments

@dan-serendipity
Copy link

dan-serendipity commented Aug 7, 2024

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

Since upgrading @typescript-eslint/eslint-plugin and @typescript-eslint/parser to v8.0.1, I'm getting false positives for react/prop-types. It looks like this might have been an issue before.

(I know v8 has only just been released. 🙏)

const X = forwardRef<HTMLDivElement, PropsWithChildren>(({ children }, ref) => <div ref={ref}>{children}</div>);
X.displayName = 'X';

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

Expected Behavior

No error.

eslint-plugin-react version

v7.35.0

eslint version

v8.57.0

node version

N/A

@ljharb
Copy link
Member

ljharb commented Aug 7, 2024

We don’t even support v6 of the ts parser yet, let alone v7 or v8. See #3629.

@dan-serendipity
Copy link
Author

Ok. I'm getting exactly the same behaviour as described in the replies to #3140 (issue only arises when props param is either named props or immediately destructured), so I'll have a look into it.

@stephane-ruhlmann
Copy link

I encountered the same issue when upgrading to typescript-eslint 8.x

I confirm that avoiding destructuring and renaming the props parameter solves the issue.

type TProps = {
  title: string;
};

const Section = forwardRef<Ref, TProps>((props, ref) => {
  return <section ref={ref}>{props.title}</section>;
});

Output: ❌ 'title' is missing in props validation react/prop-types

type TProps = {
  title: string;
};

const Section = forwardRef<Ref, TProps>(({ title }, ref) => {
  return <section ref={ref}>{title}</section>;
});

Output: ❌ 'title' is missing in props validation react/prop-types

type TProps = {
  title: string;
};

const Section = forwardRef<Ref, TProps>((myProps, ref) => {
  return <section ref={ref}>{myProps.title}</section>;
});

Works ✅

Not ideal but a simple workaround 🤷‍♂️

@dan-serendipity
Copy link
Author

dan-serendipity commented Sep 12, 2024

Fixed in v7.36.0 via #3629. Thanks all!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
3 participants