React, Uncaught ReferenceError: ReactDOM is not defined

Question

I am doing this Router tutorial.

My App.jsx file:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'

class App extends React.Component {
render() {
  return (
     <div>
        <ul>
           <li>Home</Link>
           <li>About</Link>
           <li>Contact</Link>
        </ul>

       {this.props.children}
     </div>
  )
 }
}

export default App;

class Home extends React.Component {
render() {
  return (
     <div>
        <h1>Home...</h1>
     </div>
  )
 }
}

export default Home;

class About extends React.Component {
render() {
  return (
     <div>
        <h1>About...</h1>
     </div>
  )
 }
}

export default About;

 class Contact extends React.Component {
render() {
  return (
     <div>
        <h1>Contact...</h1>
     </div>
  )
 }
}

export default Contact;

my Main.js file:

ReactDOM.render((
<Router history = {browserHistory}>
  <Route path = "/" component = {App}>
     <IndexRoute component = {Home} />
     <Route path = "home" component = {Home} />
     <Route path = "about" component = {About} />
     <Route path = "contact" component = {Contact} />
  </Route>
</Router>

), document.getElementById('app'))

This error is written to the console: index.js:

Uncaught ReferenceError: ReactDOM is not defined

I really dont know what to do. Followed every tut so far with no errors. Here I have no Idea what to do.

Meshwork

You probably want to have a look at some info on ES6 modules. – Rhizocarpous

Answer 1

You need to import ReactDOM in Main.js instead of App.jsx, as Main is where you are using ReactDOM to render.

Also need to import React in all files that use JSX.

Finally, also put react-router imports into Main, too.

The way imports work is, you import things you need, in places they're needed. It's not enough to import them once in one file and use in others.

Change Main.js to look like

import ReactDOM from 'react-dom'
import React from 'react'
import { Router, Route, browserHistory, IndexRoute  } from 'react-router'

ReactDOM.render((
<Router history = {browserHistory}>
  <Route path = "/" component = {App}>
     <IndexRoute component = {Home} />
     <Route path = "home" component = {Home} />
     <Route path = "about" component = {About} />
     <Route path = "contact" component = {Contact} />
  </Route>
</Router>

), document.getElementById('app'))

Beanpole

Answer 2

This error also happens if there is a Typo
"import ReactDOM from "react-dom";"

and then call Reactdom.render( <App />, document.getElementById('root')) instead of ReactDOM.render....

Follicle

For me it was ReactDOM and ReactDom, and the code editor highlighted both as if they were the same thing... – Ithnan

I was doing something like import { ReactDOM } from 'react-dom'; and removing curly braces solves the problem: import ReactDOM from 'react-dom'; – Nabob

Answer 3

I had the same issue with my ReactDOM.render not to work until I imported the following:

import ReactDOM from 'react-dom'

into the page I created, which was the shopping cart page.

Shue

Answer 4

1) install "npm install --save react-router-dom" with this command. 2) Know modify your App.jsx like this

import React from 'react';
import { Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render() {
    return (
        <div>
            <Header/>
            <Content/>
        </div>
    );
}
}

class Header extends React.Component {
render() {
    return (
        <header>
            <nav>
                <ul>
                    <li><Link to='/'>Home</Link></li>
                    <li><Link to='/about'>About</Link></li>
                    <li><Link to='/contact'>Contact</Link></li>
                </ul>
            </nav>
        </header>
    );
}
}

class Content extends React.Component {
render() {
    return (
        <main>
            <Switch>
                <Route exact path='/' component={Home}/>
                <Route path='/about' component={About}/>
                <Route path='/contact' component={Contact}/>
            </Switch>
        </main>
    );
}
}
class Home extends React.Component {
render() {
    return (
        <div>
            <h1>Home...</h1>
        </div>
    );
}
}
class About extends React.Component {
render() {
    return (
        <div>
            <h1>About...</h1>
        </div>
    );
}
}
class Contact  extends React.Component {
render() {
    return (
        <div>
            <h1>Contact...</h1>
        </div>
    );
}
}

export default App;

4) modify your main.js like this

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import {HashRouter} from 'react-router-dom';
ReactDOM.render((
<HashRouter>
    <App />
</HashRouter>
), document.getElementById('app'))

Amey

Answer 5

you should import ReactDOM and other stuff in Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute  } from 'react-router'
import {App, Home, About,Contact} from './App'


ReactDOM.render((
<Router history = {browserHistory}>
  <Route path = "/" component = {App}>
     <IndexRoute component = {Home} />
     <Route path = "home" component = {Home} />
     <Route path = "about" component = {About} />
     <Route path = "contact" component = {Contact} />
  </Route>
</Router>

), document.getElementById('app'))

if App.js file contains all components you should change export statements:

from export default Component

to export Component.

And use named import in Main.js import {App, Home, About,Contact} from './App'

import React from 'react';
import { Link, browserHistory} from 'react-router'

class App extends React.Component {
render() {
  return (
     <div>
        <ul>
           <li>Home</Link>
           <li>About</Link>
           <li>Contact</Link>
        </ul>

       {this.props.children}
     </div>
  )
 }
}

export App;

class Home extends React.Component {
render() {
  return (
     <div>
        <h1>Home...</h1>
     </div>
  )
 }
}

export Home;

class About extends React.Component {
render() {
  return (
     <div>
        <h1>About...</h1>
     </div>
  )
 }
}

export About;

 class Contact extends React.Component {
render() {
  return (
     <div>
        <h1>Contact...</h1>
     </div>
  )
 }
}

export Contact;

for browserHistory, you must configure your server appropriately to serve at all routed paths. The simplier way is using hashHistory.

//import hashHistory
import { Router, Route, hashHistory, IndexRoute  } from 'react-router'
...
//pass in Router
<Router history = {hashHistory}> ....

Indent

Answer 6

I just have a simple solution for it!

in my case the problem was with ReactDom namespace. just change it to something else and it work!

import XReactDom from 'react-dom'

Dissatisfaction

Answer 7

In this tutor this command "npm install react-router" does not save it in package.json file so modify and run command to "npm install --save react-router".

Amey

Answer 8

RouterDOM is used in main file, in your case its Main.js (where rendering takes place). Your Main.js file is the starting point and as its render reactDOM but cannot find the import for it. Just to import it in same file where its used.

Stifling

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Bilbo

Answer 9

I had a similar issue and was able to fix it by importing ReactDOM like this:

import * as ReactDOM from 'react-dom';

And then used it like this:

 <Fragment>
      {ReactDOM.createPortal(
        <Backdrop onConfirm={props.onConfirm} />,
        document.getElementById("backdrop-root")
      )}
 </Fragment>

Heterocercal