Categories
Development

Why is this React Typescript app throwing errors?

I just created a new React app using npx create-react-app my-app --template typescript and it was working fine until I changed my component to from a stateless one to a stateful one.

The error:

JSX element type 'App' is not a constructor function for JSX elements.  TS2605

    3 | import App from "./App";
    4 | 
  > 5 | ReactDOM.render(<App />, document.getElementById("root"));

All the solution I could find suggested supplying props and state to the class as well as upgrading to the latest packages. Still the error shows.

App.tsx

import * as React from "react";

interface Props {}

interface State {
zipCode: number;
error: string;
}

class App extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
        zipCode: "",
        error: null
        };
    }
    handleChange = (event: any) => {
        console.log("changing", event);
    };

    handleSubmit = (event: any) => {
        event.preventDefault();
        console.log("submitting", event);
    };
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input
                    type="text"
                    placeholder="ZIP Code"
                    value={this.state.zipCode}
                    onChange={this.handleChange} />
            </form>
        );
    }
}

export default App;

package.json

{
    "name": "react-typescript",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "@types/jest": "^24.0.0",
        "@types/node": "^12.12.26",
        "@types/react": "^16.9.19",
        "@types/react-dom": "^16.9.0",
        "@types/styled-components": "^4.4.2",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-scripts": "3.3.0",
        "styled-components": "^5.0.0",
        "typescript": "^3.7.5"
    },
    "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"
        ]
    }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react",
        "types": ["node"]
    },
    "include": ["src"]
}

Update after trying @Vlad’s answer below:

Changed import * as React from "react" to import React from "react" and now I get the following error:

JSX element type 'App' is not a constructor function for JSX elements.
Type 'App' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.  TS2605

    3 | import App from "./App";
    4 | 
  > 5 | ReactDOM.render(<App />, document.getElementById("root"));
      |                 ^
    6 | 

Leave a Reply

Your email address will not be published. Required fields are marked *