TypeScript errors while using it for type-checking JavaScript code containing React components

Question

I am using typescript for type checking my javascript code that has docstring type annotations.

It worked fine until I started using React.

There is no issue when I write my components as classes:

export default class MyComponent extends React.Component {...}

Howerver I want cleaner code using the function components:

export default function MyComponent(props) {...}

When using the function components I get two kinds of errors for every react component ( TS2607 and TS2786 ).

src/apps/status/App.js:37:21 - error TS2607: JSX element class does not support attributes because it does not have a 'props' property.

37                     <ServerTable
                       ~~~~~~~~~~~~
38                         srvData={srvData}
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
39                     />


src/apps/status/App.js:37:22 - error TS2786: 'ServerTable' cannot be used as a JSX component.
  Its instance type 'ServerTable' is not a valid JSX element.
    Type 'ServerTable' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.

37                     <ServerTable
                        ~~~~~~~~~~~

ServerTable.js:

import PropTypes from "prop-types";
import React from "react";

import LocationRow from "@apps/status/LocationRow.js";


/** @typedef {import('@types').ServerTablePropTypes} ServerTablePropTypes */

/**
 *
 * @param {ServerTablePropTypes} props
 * @returns {JSX.Element}
 * @constructor
 */
export default function ServerTable(props) {
    return <table className="server">
        <tbody>
        {Object.entries(props.srvData.locations).sort().map(
            ([locName, locData], _i) =>
                <LocationRow
                    key={locName}
                    locName={locName}
                    locDescription={locData.description}
                />
        )}
        </tbody>
    </table>;
}


ServerTable.propTypes = {
    srvData: PropTypes.object.isRequired,
};

types.ts :

...

export type ServerTablePropTypes = {
    srvData: {locations: object},
};

The command I use for type-checking: npx tsc --build jsconfig.json

The jsconfig.json file:

{
  "compilerOptions": {
    "jsx": "react",
    "module": "es2020",
    "moduleResolution": "node",
    "checkJs": true,
    "noEmit": true,
    "lib": ["es2020", "dom", "esnext", "dom.iterable"],
    "target": "es2017",
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@common/*": ["src/common/*"],
      "@sass/*": ["src/sass/*"],
      "@apps/*": ["src/apps/*"],
      "@frame_player/*": ["src/components/frame_player/*"],
      "@types": ["src/types"]
    }
  },
  "include": [
    "src/**/*",
    "test/**/*"
  ],
  "exclude": [
    "node_modules/**"
  ],
  "typeAcquisition": {
    "include": ["jest"]
  }
}

package.json :

{
  "name": "myproject",
  "description": "description of my project",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
      ...
  },
  "devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.16.0",
    "@babel/plugin-transform-regenerator": "^7.16.0",
    "@babel/plugin-transform-runtime": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-react": "^7.18.6",
    "@babel/runtime": "^7.16.0",
    "@types/events": "^3.0.0",
    "@types/jest": "^27.0.2",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@types/regenerator-runtime": "^0.13.1",
    "babel-jest": "^27.3.1",
    "babel-loader": "^8.2.3",
    "babel-preset-env": "^1.7.0",
    "chai": "^4.2.0",
    "chai-dom": "^1.8.2",
    "cheerio": "^1.0.0-rc.3",
    "css-loader": "^5.2.4",
    "doctests": "^1.0.1",
    "eslint": "^7.32.0",
    "eslint-plugin-jest": "^25.2.4",
    "eslint-plugin-jsdoc": "^36.1.0",
    "eslint-plugin-react": "^7.30.1",
    "esm": "^3.2.25",
    "file-loader": "^6.2.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.3.1",
    "jest-puppeteer": "^6.0.0",
    "jsdom": "16.4.0",
    "mock-browser": "^0.92.14",
    "postcss-loader": "^5.2.0",
    "puppeteer": "^11.0.0",
    "puppeteer-select": "^1.0.3",
    "regenerator-runtime": "^0.13.9",
    "sass": "^1.45.1",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "typescript": "^4.2.3",
    "url-loader": "^4.1.1",
    "webpack": "^5.30.0",
    "webpack-cli": "^4.6.0"
  },
  "dependencies": {
    "json5": "^2.2.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Can anyone help me, how to get rid of these errors?

Answer 1

Try changing the extension of your components to.jsx