React Types not being recognized by ESLint in Webstorm

316 views Asked by At

I have started a new create-react-app (CRA) project to replace an existing React project that did not use CRA. The project is using TypeScript and my IDE is WebStorm.

My package.json file contains the following modules in devDependencies:

"@types/react": "~16.9.50",
"@typescript-eslint/eslint-plugin": "~4.3.0",
"eslint": "6.6.0",
"eslint-config-airbnb-typescript": "~11.0.0",
"eslint-plugin-import": "~2.22.1",
"eslint-plugin-jsx-a11y": "~6.3.1",
"eslint-plugin-react": "~7.21.3",
"eslint-plugin-react-hooks": "~4.1.2",
"typescript": "~4.0.3"

An example of one component is as follows:

import React, { FunctionComponent } from 'react';
const Content: FunctionComponent = () => (
  <div>Hello</div>
);
export { Content };

ESLint / WebStorm complains with the following error:

ESLint: 'FunctionComponent' is defined but never used.(@typescript-eslint/no-unused-vars)

My code still compiles without any errors or warnings and my website works without any issues. My previous project did not have any issues recognizing TypeScript types. I have the @types modules installed. I think the relevant parts of .eslintrc, tsconfig.json and the relevant settings in WebStorm are identical.

Does anyone have any insight?

1

There are 1 answers

0
D. Campbell On

I resolved the issue by upgrading to react-scripts 4.0