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?
When you encounter an error saying 'ReactDOM' is not defined, it means that your application is can't find the variable ReactDOM because it hasn't been initialized yet. Generally, “X is not defined error” is caused by wrong import and different letter case between import and the imported variable call.
To solve the error, create a root element and use the ReactDOMClient. render method instead. Copied! import {StrictMode} from 'react'; import {createRoot} from 'react-dom/client'; import App from './App'; // 👇️ IMPORTANT: use correct ID of your root element // this is the ID of the div in your index.
ReactDOM is a package that provides DOM specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an API containing the following methods and a few more.
js error "X is not defined react/jsx-no-undef" occurs when we forget to import a function, class or a variable in our code before using it. To solve the error, make sure to import the value before using it in your code, e.g. import {myFunc} from 'my-package' . What is this?
You have ReactDOM
but you don't have ReactDom
(case sensitive)
ReactDOM.render(<Main />, document.getElementById('root'));
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'));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With