Uncaught ReferenceError: ReactDOM is not defined

Question

So i have Rails applications, i installed react-rails gem, set it up and try to run test application.

Freshly installed, when i tryed to run hello world program, this error hapened:

Uncaught ReferenceError: ReactDOM is not defined

This is my react:

var HelloWorld = React.createClass({
  render: function() {
    return (
      <p>
        Hello, <input type="text" placeholder="Your name here" />!
        It is {this.props.date.toTimeString()}
      </p>
    );
  }
});

setInterval(function() {
  ReactDOM.render(
    <HelloWorld date={new Date()} />,
    document.getElementById('example')
  );
}, 500);

Its saved inside /app/assets/javascripts/components/test.js.jsx file.

Rails 4.2.4 With Ruby 2.2.3

Adam · Answer 1 · 2020-05-16T20:21:43.490

86

It may be the spelling issue - it is ReactDOM, not ReactDom.

This has changed over time with the new release of React

edited May 16 '20 at 20:21

answered Apr 02 '16 at 22:42

Adam

3,415
4
30
49

Something strange is happening here. I'm not sure that this should be correct based on the tutorial available (https://facebook.github.io/react/docs/tutorial.html) but my app actually started working when I changed ReactDom to ReactDOM when using 15.0.1 and ReactDom 15.0.1. – Grisk Apr 20 '16 at 18:32
5

Unbelievable. Just spent an hour tearing my hair out making wrong assumptions as to why SystemJS (that's what I was using) was telling me ReactDom was undefined. Finally saw this answer, replaced the spelling to ReactDOM, and it works...Oh boy. – Gilad Barner Jun 08 '16 at 15:32
Perfect click boss! – Chandresh M May 21 '19 at 12:48
Very common error. I've done this many times with ReactDOM. Watch out for it. – Harlin Aug 09 '19 at 01:00

Oleksandr T. · Accepted Answer · 2019-05-20T09:38:47.773

29

ReactDOM available since version 0.14.0, so you need to use React.render (because you have a React version 0.13.3) instead,

setInterval(function() {
  React.render(
    <HelloWorld date={new Date()} />,
    document.getElementById('example')
  );
}, 500);

or upgrade your React version and include ReactDOM

Changes in React 0.14

edited May 20 '19 at 09:38

answered Oct 14 '15 at 12:51

Oleksandr T.

76,493
17
173
144

1

That did the trick, i got another error, but i think i will just remove the gem and install newest react version manualy. Thanks for the response!!! – IvRRimUm Oct 14 '15 at 12:56

score 18 · Answer 3 · answered Jul 17 '18 at 16:06

18

You have to import it

import ReactDOM from 'react-dom';

answered Jul 17 '18 at 16:06

Kay

402
4
6

score 9 · Answer 4 · answered Jan 17 '17 at 15:34

Make sure that you've included react-dom.js. You can add it from CDN or use js toolchain of your choice.

Installing React - using a CDN

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

score 3 · Answer 5 · answered Sep 07 '21 at 17:38

Make sure it's ReactDOM (case sensitive)

          class App extends React.Component {
            render() {
                return (
                    <div>
                        <div className="commentbox">Hello React ! </div>
                    </div>
                );
            }
        }
        ReactDOM.render(<App />, document.getElementById('root'));

score 0 · Answer 6 · answered May 25 '20 at 12:57

To make it work properly, you have to do 3 things.

Import the CDNs, necessary for the developement(Say react and react-dom for web development)

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

install babel-cli . It is needed for the compilation of JSX into vanila js
change the typo in your code,

it is ReactDOM , not RaactDOM

Uncaught ReferenceError: ReactDOM is not defined

6 Answers6

Linked