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

[mario-iliev]

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

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]

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

[ljharb]

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

[tylerlaprade]

I'm getting a similar error with sort-prop-types. I've determined that the offending code is a React component that doesn't have any props.

Config:

"react/sort-prop-types": [
      "error",
      {
        "callbacksLast": true,
        "requiredFirst": true,
        "sortShapeProp": true,
        "noSortAlphabetically": true,
        "checkTypes": true
      }
    ],

Error:

$ eslint "{src,tests}/**/*.{js,ts,tsx}" --fix

Oops! Something went wrong! :(

ESLint: 8.57.0

TypeError: Cannot read properties of undefined (reading 'typeAnnotation')
Occurred while linting /Users/tyler/Code/condor/paqarina/src/AppWithAuthentication.tsx:9
Rule: "react/sort-prop-types"
    at handleFunctionComponent (/Users/tyler/Code/condor/paqarina/node_modules/eslint-plugin-react/lib/rules/sort-prop-types.js:233:39)
    at ruleErrorHandler (/Users/tyler/Code/condor/paqarina/node_modules/eslint/lib/linter/linter.js:1076:28)
    at /Users/tyler/Code/condor/paqarina/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/tyler/Code/condor/paqarina/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/Users/tyler/Code/condor/paqarina/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (/Users/tyler/Code/condor/paqarina/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
    at NodeEventGenerator.enterNode (/Users/tyler/Code/condor/paqarina/node_modules/eslint/lib/linter/node-event-generator.js:340:14)
    at CodePathAnalyzer.enterNode (/Users/tyler/Code/condor/paqarina/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:803:23)
    at /Users/tyler/Code/condor/paqarina/node_modules/eslint/lib/linter/linter.js:1111:32

[tylerlaprade]

Ooh yeah, ours is outdated since we didn't get around to updating our eslint config to the new JS style instead of JSON:
"@typescript-eslint/parser": "5.62.0"

[ljharb]

hm, that's the same version I have locally (and the latest one we currently test against), which doesn't reproduce the problem.

[tylerlaprade]

Here's our full config. It still repros after I deleted all other rules:

{
  "env": { "browser": true, "es2022": true, "node": true},
  "root": true,
  "plugins": ["react"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": { "jsx": true },
    "ecmaVersion": "latest",
    "project": "./tsconfig.json",
    "sourceType": "module",
    "tsconfigRootDir": "./"
  },
  "settings": {
    "react": { "version": "detect" },
    "import/parsers": { "@typescript-eslint/parser": [".ts", ".tsx"] },
    "import/resolver": {
      "node": { "extensions": [".ts", ".tsx"], "moduleDirectory": ["src", "src/tests/utils", "node_modules"] },
      "typescript": { "alwaysTryTypes": true }
    }
  },
  "rules": {
    "react/sort-prop-types": [
      "error",
      {
        "callbacksLast": true,
        "requiredFirst": true,
        "sortShapeProp": true,
        "noSortAlphabetically": true,
        "checkTypes": true // TODO: This blows up if a component doesn't have props: https://github.com/jsx-eslint/eslint-plugin-react/pull/3779
      }
    ]
  }
}

[tylerlaprade]

And here is our tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "baseUrl": "src",
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noEmitOnError": false,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "strict": true,
    "types": ["vite/client"]
  },
  "files": ["node_modules/jest-extended/types/index.d.ts"],
  "include": ["__mocks__", "src", "**/*.d.ts"]
}

[ljharb]

nvm, it reprod, thanks :-)