CODEWITHSUNDEEP
javascriptreactjswebpackbabeljsreact-dom
Yaniv Efraim
Yaniv Efraim

Reputation: 6713

ReactDom is undefined

I am using React with Webpack and Babel. I am getting a runtime error:

Uncaught ReferenceError: ReactDom is not defined

My react version is:

"devDependencies": {
   "phantomjs-polyfill": "0.0.2",
   "react-addons-test-utils": "^0.14.8"
 },    
 "dependencies": {
   "react": "^0.14.7",
   "react-dom": "^0.14.7"
 },

and my code is:

import React from 'react';
import ReactDOM from 'react-dom';
import Main from './components/main';

ReactDom.render(<Main />, document.getElementById('root'));

What am I doing wrong?

Upvotes: 15

Views: 40635

Answers (3)

Avinash Singh
Avinash Singh

Reputation: 11

There is a minor error in your code you have written ReactDom instead of ReactDOM. The correct code should be given below :

import React from 'react';
import ReactDOM from 'react-dom';
import Main from './components/main';

ReactDOM.render(<Main />, document.getElementById('root'));

Upvotes: 1

prime
prime

Reputation: 15574

ReactDOM != ReactDom. There are two things you can do to fix this.

import React from 'react';
import ReactDOM from 'react-dom'; // you used 'react-dom' as 'ReactDOM'
import Main from './components/main';

ReactDom.render(<Main />, document.getElementById('root')); // you referred to it as 'ReactDom' which is wrong.

Becasue ReactDOM != ReactDom. So you need to fix one of those places so that both places have the same name with the same case.

The recommended fix would be,

import React from 'react';
import ReactDOM from 'react-dom'; // this is recommended 
import Main from './components/main';

ReactDOM.render(<Main />, document.getElementById('root'));

Or you can do,

import React from 'react';
import ReactDom from 'react-dom';
import Main from './components/main';

ReactDom.render(<Main />, document.getElementById('root'));

Upvotes: 4

Oleksandr T.
Oleksandr T.

Reputation: 77482

You have ReactDOM but you don't have ReactDom(case sensitive)

ReactDOM.render(<Main />, document.getElementById('root'));

Upvotes: 45

Related Questions