ReactDOM.render Cannot read property

Question

Index.js:

import React from 'react'; 
import buttonsInstance from 'components/button-instance';
import {ReactDOM} from 'react-dom';

ReactDOM.render(buttonsInstance, document.getElementById('app'));

and button-instance.js:

import React from 'react';
import {ButtonToolbar} from 'react-bootstrap';
import {Button} from 'react-bootstrap';

const buttonsInstance = (
  <div>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="large">Large button</Button>
      <Button bsSize="large">Large button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary">Default button</Button>
      <Button>Default button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="small">Small button</Button>
      <Button bsSize="small">Small button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
      <Button bsSize="xsmall">Extra small button</Button>
    </ButtonToolbar>
  </div>
);

I'm trying to use reactbootstrap from https://react-bootstrap.github.io/components.html .

Then I got error :

Uncaught TypeError: Cannot read property 'render' of undefined
    at Object.<anonymous> (index.js:9)
    at __webpack_require__ (bootstrap 571b93c…:657)
    at fn (bootstrap 571b93c…:85)
    at Object.<anonymous> (log-apply-result.js:30)
    at __webpack_require__ (bootstrap 571b93c…:657)
    at module.exports (bootstrap 571b93c…:706)
    at bootstrap 571b93c…:706

I'm use webpack, webpack-dev-server and es6. My react and react-dom is up to date. I have no idea about how to fix this.

Solution 1

Import the ReactDOM like this:

import ReactDOM from 'react-dom';

Its a default import (import the complete package to use the different methods of that) not named import, that's why you are getting the error:

Cannot read property 'render' of undefined

Or you can directly import the render method from react-dom like this:

import {render} from 'react-dom';

now use render to directly render the component:

render(buttonsInstance, document.getElementById('app'));

Solution 2

If you get the following error

Cannot read property xxx of undefined

And if you're using react-script-ts as well as rollup use import * as ...

import * as React from "react";
import * as ReactDOM from "react-dom";