TypeScript+React suddenly giving incompatible Props errors

Question

Yesterday everything worked fine with my TypeScript+React project. Today everything is broken with no change what so ever to any configurations. Rolling it back to working versions using Git doesn't help. Reinstalling all packages with NPM doesn't help.

I tried to rip everything off my App.jsx to locate the error.

This is my app.jsx

import * as React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

interface Props {}

class App extends React.Component<Props> {
    render() {
        return (
            <div className="App">
                <Router>
                    <div>
                        <Route exacty={true} path="/" component={<p>Hello</p>}/>
                    </div>
                </Router>
            </div>
        );
    }
}

export default App;

But this still gives me an error:

(10,5): error TS2605: JSX element type 'BrowserRouter' is not a constructor function for JSX elements.
Types of property 'setState' are incompatible.
Type '{ <K extends never>(f: (prevState: void, props: BrowserRouterProps) => Pick<void, K>, callback?: ...' is not assignable to type '{ <K extends never>(f: (prevState: {}, props: any) => Pick<{}, K>, callback?: () => any): void; <...'.
  Types of parameters 'f' and 'f' are incompatible.
    Type '(prevState: {}, props: any) => Pick<{}, any>' is not assignable to type '(prevState: void, props: BrowserRouterProps) => Pick<void, any>'.
      Types of parameters 'prevState' and 'prevState' are incompatible.
        Type 'void' is not assignable to type '{}'.

The problem I have is that simply every component with Props is broken. If I for example have a component such as my Header I get an error such as this The header is a Component with empty Props object.

Here are my tsconfig.json and package.json if it helps https://pastebin.com/FSyCA1BB

Answer 1

The problem I had is that in package.json I had @types/react-router-dom at all. None of the versions worked but removing it completely from package.json fixed the problem.

Answer 2

The type definitions for react-router go out of date / invalid very frequently. The issue with maintaining the type definitions has to do with the fact that react-router's docs go out of date just as frequently.

Fix

Wait till the definitions catch up

Alternate

I wrote something simple to get around it http://basarat.com/takeme