Il s'agit de la configuration de mon routeur React que je souhaite exécuter via Typescript. Cela fonctionne sans Typescript, mais pas avec. J'obtiens une erreur d'exécution dans la console de mon navigateur. La transpilation fonctionne bien cependant. Cela ne fait aucune différence si j'inclus un "react.js" et "react-dom.js" séparément ou un "bundle.js" géant avec tout inclus. Qu'est-ce que je fais mal?

Erreur:

Router.js:91 Uncaught TypeError: Cannot read property 'Component' of undefined
// For context, the line says: React.Component
at Object../node_modules/react-router/es/Router.js (Router.js:91)
at __webpack_require__ (bootstrap:19)
at Object../node_modules/react-router-dom/es/Router.js (Router.js:2)
at __webpack_require__ (bootstrap:19)
at Object../node_modules/react-router-dom/es/BrowserRouter.js (BrowserRouter.js:11)
at __webpack_require__ (bootstrap:19)
at Object../node_modules/react-router-dom/es/index.js (index.js:1)
at __webpack_require__ (bootstrap:19)
at Object../src/index.tsx (index.tsx:3)
at __webpack_require__ (bootstrap:19)

Code:

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

class App extends React.Component {
  render() {
    return (
        <Router>
        <Switch>
        <Route path="/test/" render={() => (
            <div>
                Test.
            </div>
        )} />
        <Route exact={true} path="/" render={() => (
            <div>
                Root page.
            </div>
        )} />
        </Switch>
        </Router>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById("root") as HTMLElement
);
0
stef 18 mars 2019 à 21:21

2 réponses

Meilleure réponse

D'accord.

La solution était d'ajouter "esModuleInterop": true à mon tsconfig.json.

De plus, "allowSyntheticDefaultImports": true m'a permis d'écrire import React from "react"; au lieu de import * as React from "react";.

Merci tout le monde.

1
stef 18 mars 2019 à 18:43

La façon dont vous importez React est le problème. Vous devez remplacer toutes vos déclarations d'importation par quelque chose comme ceci :

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
0
Kevin Pastor 18 mars 2019 à 18:32