Website-Suche

javascript - TypeScript+React gibt plötzlich inkompatible Props-Fehler aus

Gestern funktionierte alles einwandfrei mit meinem TypeScript+React-Projekt. Heute ist alles kaputt, ohne dass sich irgendetwas an den Konfigurationen geändert hätte. Ein Zurückrollen auf funktionierende Versionen mit Git hilft nicht. Das Neuinstallieren aller Pakete mit NPM hilft auch nicht.

Ich habe versucht, alles von meiner App.jsx zu entfernen, um den Fehler zu finden.

Das ist meine 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;

Aber das gibt mir immer noch einen Fehler:

(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 '{}'.

Das Problem, das ich habe, ist, dass einfach jede Komponente mit Props kaputt ist. Wenn ich zum Beispiel eine Komponente wie meinen Header habe, erhalte ich einen Fehler wie diesen: Der Header ist eine Komponente mit einem leeren Props-Objekt.

Hier sind meine tsconfig.json und package.json, falls es hilft https://pastebin.com/FSyCA1BB

Antwort #1

Die Typdefinitionen für react-router werden sehr häufig veraltet oder ungültig. Das Problem bei der Pflege der Typdefinitionen hängt damit zusammen, dass die Dokumentation von react-router genauso häufig veraltet.

Reparieren

Warte, bis die Definitionen nachziehen

Alternativ

Ich habe etwas Einfaches geschrieben, um es zu umgehen http://basarat.com/takeme

Antwort #2

Das Problem, das ich hatte, war, dass ich @types/react-router-dom überhaupt in der package.json hatte. Keine der Versionen funktionierte, aber das vollständige Entfernen daraus aus der package.json löste das Problem.

Verwandte Artikel