eslint-plugin-react: (react props) is missing in props validation ERROR

I just tested the version 7.20.6 and I got the error ... is missing in props validation . It’s a Nextjs project and I want to add the linting now but I got the error on my components 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

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 7
Comments: 27 (14 by maintainers)

Most upvoted comments

what’s NextPage? React components usually aren’t typed like that.

ljharb on Aug 31, 2020

In general, because arrow functions don’t have explicit names, it makes them worse for debuggability

JS Engines (at least chrome…) actually do implicit naming for arrow functions based on the name of the variable:

So I don’t think there’s a difference between function decls and arrow functions in this regard.

but I believe the issue is in the typescript eslint parser

In this case, no - the AST is working as expected: the type annotation is on the variable declaration, not the function argument. You will get roughly the same AST shape with babel parsing TS, or any flow parser as well.

This plugin would have to traverse the parent in order to find the annotation, and then do some handling of the type to find the prop type.

Common cases it could handle:

The “handling” would essentially be:

annotation = id.typeAnnotation.typeAnnotation
if (annotation.type !== 'TSTypeReference' && annotation.typeParameters == null) return; (not a generic type with type params)
if (!allowedTypes.has(context.getSourceCode().getText(annotation.typeName).replace(/ /g, ''))) return (note an allowed generic type)
follow the reference from the generic parameter to the props def.
validate prop type against prop def

bradzacher on Aug 31, 2020

@joshmedeski https://github.com/yannickcr/eslint-plugin-react/issues/2777#issuecomment-683944481 someone’s welcome to make a PR implementing this rough plan.

ljharb on Apr 6, 2022