[How to fix] Uncaught ReferenceError: ReactDOM is not defined

This easy to fix error is caused by calling ReactDOM without importing the react-dom npm package. It’s also possible you have a typo in your import.

To fix this error, check to make sure the name you are importing ReactDOM as matches your render call. If you haven’t yet installed react-dom, install using npm or yarn. Then import ReactDOM at the top of your javascript file.

Install ReactDOM:

$ npm install react-dom
or
$ yarn add react-dom

Then import it at the top of your file like this:

// ES6-style import
import ReactDOM from 'react-dom';
or
// CommonJS require
const ReactDOM = require('react-dom');Code language: JavaScript (javascript)

ReactDOM exports a default component, so you can import it with any name. It’s standard to call it ReactDOM, but you can use another name if you want, like this:

import rd from 'react-dom';

// Then use the same name to call render()
rd.render(<MyComponent>, document.getElementById('App'));Code language: JavaScript (javascript)

“SomeFunction” is undefined

Generally, any time you get an error that a function you are trying to run is undefined, it’s caused by an import problem. The most common causes are:

There is a typo in your import

This happens most often when you are importing the default export from a module and have a typo in the imported name. There is no error with the import, because you can import a default export with any name you want. The error only happens when you try to access the imported module with a name that doesn’t match

import somefunc from 'some-func';

someFunc(); // <-- errors because it is imported as "somefunc"Code language: JavaScript (javascript)

There is a typo in the name of a named export

If you are importing a named export from a module that you created, check the exports. It’s possible you have a typo in the name of the export. When importing named exports the name has to match otherwise the imported value will be undefined.

// module.js
export const someFunc = () => "Hello World";

// myFile.js
import { somefunc } from './module';

somefunc(); // <-- errors because module.js doesn't export "somefunc"

// If you want it to have a different name this is ok
import { someFunc as somefunc } from './module';Code language: JavaScript (javascript)

You are trying to import a named export from a module that only exports a default export

Confirm whether the module you are importing exports a default export, named export(s) or both.

// module.js
export const thisFunc = () => "Hello";
export default () => "World";

// myFile.js
import thatFunc, { thisFunc } from './module';

thatFunc(); // this is the default export
thisFunc(); // this is a named exportCode language: JavaScript (javascript)