Fixing ReactDOM is not defined error


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.

Most likely, you forgot to import it from the package react-dom:

import ReactDOM from 'react-dom'

Or if you use ES5:

const ReactDOM = require('react-dom')

If you have the import but still got the error, check the letter case of both your import and your code that calls the variable. Make sure it’s exactly the same case. In the example below, the variable is called as ReactDom while the import is defined as ReactDOM. This will not work:

import ReactDOM from 'react-dom'

ReactDom.render()

Generally, “X is not defined error” is caused by wrong import and different letter case between import and the imported variable call. The error isn’t React specific, but a regular JavaScript import and export error.

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.