[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 export
Code language: JavaScript (javascript)

Recent Posts

link to How to fix: Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

How to fix: Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

This common Javascript error, “Element type is invalid,” is usually caused by a mismatch between import and exports. You are trying to import the default export from a module that only exports...