How do you check for prop errors in a React/Typescript project with ESLint?

Question

I am in the process of migrating a create-react-app Typescript project to the latest version of create-react-app, and with it I am moving from the now deprecated tslint to eslint. The issue I am having with this transition is that I cannot get eslint to throw either an error or a warning on missing props.

Take this sample React component:

interface Props {
  name: string;
  count: number;
}

const ExampleComponent = (props: Props) => {
  const {name, count} = props;
  return (
    <div>
      {name} {count}
    </div>
  );
}

export default ExampleComponent;

that is then later called by another component:

import ExampleComponent from './ExampleComponent';

const App = (props: Props) => {
  return (
    <ExampleComponent count={5} />
  );
}

In the above example, the count prop is missing. This should result in an error or warning thrown by eslint, as it previously did with tslint. My IDE recognizes the missing prop and will highlight it, however I can still compile the code successfully, which it should not be doing.

How can I modify my eslint configuration in order to get an error whenever a prop is missing (or in the same sense, if an extra prop that shouldn't be there is there)?

Here is my .eslintrc.js:

module.exports = {
    "env": {
        "browser": true,
        "node": true
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": "tsconfig.json",
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "plugins": [
        "eslint-plugin-jsdoc",
        "eslint-plugin-prefer-arrow",
        "eslint-plugin-import",
        "eslint-plugin-react",
        "@typescript-eslint",
        "@typescript-eslint/tslint"
    ],
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:react/recommended",
      ],
    "rules": {
        "@typescript-eslint/no-inferrable-types": "off",
        "react/no-unescaped-entities": "off",
        "@typescript-eslint/no-var-requires": "off",
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "jsdoc/require-jsdoc": "off",
        "@typescript-eslint/no-unused-vars": "off",
        "max-len": ["error", 200, 2, {
          "ignoreUrls": true,
          "ignoreComments": true,
          "ignoreRegExpLiterals": true,
          "ignoreStrings": true,
          "ignoreTemplateLiterals": true
        }],
        "no-prototype-builtins": "off"
    }
};

And below is my tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "strictFunctionTypes": false,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "allowJs": true,
    "skipLibCheck": true,
    "noEmitHelpers": false,
    "noUnusedLocals": true,
    "removeComments": false,
    "preserveConstEnums": false,
    "sourceMap": true,
    "importHelpers": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedParameters": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "build",
    "node_modules",
    "src/setupProxy.js",
    "archived"
  ]
}

You don't need ESLint to throw an error on that - TypeScript itself will fail to compile. Intellisense will also show you the issue in your IDE. — Dean James
– Dean James, Commented Dec 21, 2020 at 0:32
My IDE is performing correctly and highlighting the error. However TypeScript compiles with no errors, both in development and when I build production. My IDE alone isn't enough, as it only shows the error if I am currently looking at the file. I have edited the question and attached my tsconfig.json as well — Kyle Soeltz
– Kyle Soeltz, Commented Dec 21, 2020 at 0:44

Kyle Soeltz · Accepted Answer · 2020-12-22 13:17:48Z

2

The issue is not a problem with ESLint not catching the error, but rather in the migration process to the newest version of create-react-app. Updating react-scripts (to version 4.0.1 at the time of writing this) does not also update the TypeScript version. The difference versions causes a number of errors not being properly reported. Updating Typescript to version 4.0.3 fixes the problem.

edited Dec 22, 2020 at 13:17

answered Dec 21, 2020 at 1:16

Kyle Soeltz

3161 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dean James Over a year ago

Could you expand on what exactly happened? I have been able to reproduce your issue on codesandbox, but starting a new CRA project does not compile, as expected.

Kyle Soeltz Over a year ago

I started a new CRA project to see if something was different as well, and had the same experience of it not compiling, as expected. After comparing both package.json files, my project was running TS 3.5.x, whereas the newest CRA project has 4.0.3. After upgrading my project to match, the errors began appearing again. Also of note is that I initially upgraded TS all the way to 4.1.x, but there are a number of jsx related errors that haven't been patched yet for that release, so I rolled back to 4.0.3

Dean James Over a year ago

Perfect, the different between the minor versions is what I was experiencing too. Thank you for taking the time to explain!

Luiz Fernando da Silva Over a year ago

It solved for me on react build for typescript later versions

Collectives™ on Stack Overflow

How do you check for prop errors in a React/Typescript project with ESLint?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related