JSX element type 'App' is not a constructor function for JSX elements. Types of property 'setState' are incompatible

Viewed 22025

I am using the Microsoft TypeScript-React-Starter and got this compile error during npm start:

./src/index.tsx
(16,5): error TS2605: JSX element type 'App' is not a constructor function for JSX elements.
  Types of property 'setState' are incompatible.
    Type '{ <K extends never>(f: (prevState: null, props: {}) => Pick<null, K>, callback?: (() => any) | un...' is not assignable to type '{ <K extends never>(f: (prevState: {}, props: any) => Pick<{}, K>, callback?: (() => any) | undef...'.
      Types of parameters 'f' and 'f' are incompatible.
        Type '(prevState: {}, props: any) => Pick<{}, any>' is not assignable to type '(prevState: null, props: {}) => Pick<null, any>'.
          Types of parameters 'prevState' and 'prevState' are incompatible.
            Type 'null' is not assignable to type '{}'.

So it seems like my setState function has incorrect signature but I'm not sure how to fix it. Here's my code:

class App extends React.Component<{}, null> {
  render() {
    return (
      <div className="App">
        ...
      </div>
    );
  }
}

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root') as HTMLElement
);

I am using:

node v6.11.0
npm v5.1.0
typescript v2.4.1
react v15.6.1
redux v3.7.1
react-redux v5.0.5
react-scripts-ts v2.3.2

Update:

I found out that removing the generic types <{}, null> clears the error. But I'd still love to learn why I was getting the error.

2 Answers

Maybe this fix isn't relevant but I got the same error message without having <{}, null> after class App extends React.Component. Here is the fix in my case.

Change import React from 'react';

to import * as React from 'react';

Related