jsx-eslint / eslint-plugin-react

React-specific linting rules for ESLint
MIT License
8.86k stars 2.75k forks source link

[Bug]: react/boolean-prop-naming not working with TS & declaration #3763

Closed mario-iliev closed 1 week ago

mario-iliev commented 3 weeks ago

Is there an existing issue for this?

Description Overview

There is no indication in IDE that the prop is not correct. Terminal is throwing:

ESLint: 8.57.0

TypeError: Cannot read properties of undefined (reading 'properties')

The affected component code: const Component = ({ color, withBackground }: ComponentProps & { withBackground?: boolean }) => (...);

I managed to fix the problem by moving the props definition in a separate type:

type ExtendedComponentProps = ComponentProps & { withBackground?: boolean };

const Component = ({ color, withBackground }: ExtendedComponentProps) => (...);

By doing this, the IDE is properly suggesting that "withBackground" is not covering the rules:

'react/boolean-prop-naming': [
      'warn',
      {
        rule: '^(is|has|are|can|should|show|hide)[A-Z]([A-Za-z0-9]?)+',
      },
]

Packages versions:

 "eslint": "8.57.0",
 "eslint-plugin-react": "7.34.2",
 "@typescript-eslint/eslint-plugin": "7.11.0",
 "@typescript-eslint/parser": "7.11.0",
 "typescript": "5.4.5"

Expected Behavior

Properly validate the props.

eslint-plugin-react version

v7.34.2

eslint version

v8.57.0

node version

v18.18.0

ljharb commented 3 weeks ago

I believe this is fixed but not yet released. See #3733.

ljharb commented 1 week ago

Released in v7.34.3. Happy to reopen if it's not fixed.