“xxx”类型缺少“ElementClass”类型的以下属性：context、setState、forceUpdate、props 和另外 2 个。 TS2605

Question

I'm receiving the following error when trying to run my react app:

D:/React/my-components/src/App.tsx TypeScript error in D:/React/my-components/src/App.tsx(23,4): JSX element type 'Confirm' is not a constructor function for JSX elements. Type 'Confirm' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more. TS2605

21 |         </a>
22 |       </header>
23 |      <Confirm />
   |      ^
24 |     </div>
25 |   );
26 | }

Here is my Confirm component code

 import * as React from "react"; class Confirm extends React.Component{ render(){ return ( <div className="confirm-wrapper confirm-visible"> <div className="confirm-container"> <div className="confirm-title-container"> <span>This is where our title should go</span> </div> <div className="confirm-content-container"> <p>This is where our content should go</p> </div> <div className="confirm-buttons-container"> <button className="confirm-cancel">Cancel</button> <button className="confirm-ok">Okay</button> </div> </div> </div> ); } } export default Confirm;

And App.tsx code

 import React from 'react'; import logo from './logo.svg'; import './App.css'; import Confirm from './Confirm'; const App: React.FC = () => { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.tsx</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> <Confirm /> </div> ); } export default App;

This is my package.json

 { "name": "my-components", "version": "0.1.0", "private": true, "dependencies": { "@types/jest": "24.0.18", "@types/node": "12.7.8", "@types/react": "16.9.4", "@types/react-dom": "16.9.1", "react-scripts": "3.1.2", "typescript": "3.6.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "react": "^16.10.1", "react-dom": "^16.10.1", "tslint": "^5.20.0", "tslint-config-prettier": "^1.18.0", "tslint-react": "^4.1.0" } }

Answer 1

Thank all, i have fixed this error by run following command

yarn upgrade @types/react@latest

Answer 2

I had a component named Component.tsx (camelcase) and a helper called component.ts (lowercase) and this seemed to make these become mixed up. I was importing them in the same file also so I just renamed the Component one.