“React” undefined for React Router with Typescript

Question

This is my React Router setup that I want to run through Typescript. It works without Typescript, but not with it. I get an runtime error in my browser console. Transpilation works fine though. It doesn’t make a difference if I include a “react.js” and “react-dom.js” seperately or a giant “bundle.js” with everything included. What am I doing wrong?

Error:

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
);

stef · Accepted Answer · 2019-03-18 18:43:33Z

1

Okay.

The solution was to add "esModuleInterop": true to my tsconfig.json.

Additionally, "allowSyntheticDefaultImports": true allowed me to write import React from "react"; instead of import * as React from "react";.

Thanks everyone.

answered Mar 18, 2019 at 18:43

stef

3132 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kevin Pastor · Accepted Answer · 2019-03-18 18:32:30Z

0

The way you import React is the problem. You should replace all your importing statements with something like this:

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

answered Mar 18, 2019 at 18:32

Kevin Pastor

8014 silver badges19 bronze badges

2 Comments

stef Over a year ago

I had this before. Now I get these kinds of errors:

ERROR in [at-loader] ./src/index.tsx:1:8          TS1192: Module '"/%path%/node_modules/@types/react/index"' has no default  export.

stef Over a year ago

Okay. I managed to to that via "allowSyntheticDefaultImports": true in my tsconfig.json but now I am getting the same error from my initial post.

Collectives™ on Stack Overflow

“React” undefined for React Router with Typescript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related