Fixing ReactDOM is not defined error

Here's how to fix ReactDOM is not defined error

Posted on October 16, 2020


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.

Related articles:

Level up your React skill today 🔥

Build FOUR projects using React with my latest book.

Structured knowledge from beginner to experienced level!

Learn more