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, browserH         


        

Answer 1

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....

Answer 2

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

Answer 3

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

Answer 4

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'

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}> ....

Answer 6

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".