Typescript react not importing correctly

Question

I have the following typescript:

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    <div>
      <p>Hello world!</p>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'))

It produce the following js:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const react_dom_1 = require("react-dom");
const App = () => {
    return (react_1.default.createElement("div", null,
        react_1.default.createElement("p", null, "Hello world!")));
};
react_dom_1.default.render(react_1.default.createElement(App, null), document.getElementById('app'));
//# sourceMappingURL=react.component.js.map

When running it, I get the following error:

(index):29 Error: (SystemJS) Cannot read property 'render' of undefined
  TypeError: Cannot read property 'render' of undefined

It seems like react_dom_1.default is undefined, but I have no clue why?

Remo H. Jansen · Accepted Answer · 2017-06-14 14:24:30Z

7

Try:

import * as React from 'react'
import * as ReactDOM from 'react-dom'

Update

It worked. Could you maybe explain why the other method does not?

In the Es6 module system there are multiple ways to export and import:

Implicit import (AKA default)

You can export things like:

export default someVar;

And then import it as:

import someVar from "./somemodule"

Explicit import

You can export things like:

export { someVar };

And then import it as:

import { someVar } from "./somemodule";

A module can have multiple exports:

export { someVar1, someVar2 };

You can import multiple entities in one import:

import { someVar, someVar2 } from "./somemodule";

You can also declare aliases at entity level:

import { someVar as A, someVar2 as B } from "./somemodule";

Or at module level:

import * as SomeModule from "./somemodule";

Amd then access the entities:

console.log(SomeModule.someVar);
console.log(SomeModule.someVar2);

You were using the default import from React and ReactDom but those modules expose multiple entities.

edited Jun 14, 2017 at 14:24

answered Jun 14, 2017 at 14:11

Remo H. Jansen

25.2k13 gold badges73 silver badges99 bronze badges

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

3 Comments

Murdock Over a year ago

It worked. Could you maybe explain why the other method does not?

Luiz Henrique Guerra Over a year ago

In addition to that, if you only need the render method, you can do this: import { render } from 'react-dom'

Nikola Lukic Over a year ago

TypeError: undefined is not an object (evaluating 'react_dom_1.default.findDOMNode') Please help !

Collectives™ on Stack Overflow

Typescript react not importing correctly

1 Answer 1

Update

Implicit import (AKA default)

Explicit import

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

Implicit import (AKA default)

Explicit import

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related