How to fix Module not found: Can't resolve 'react-dom' in React

ReactBEGINNERHIGH

This error occurs when React cannot locate the react-dom package in your project dependencies. It typically happens during the build process or when starting the development server, preventing your React application from rendering.

What this error means

This error indicates that the React bundler (typically Webpack or Vite) cannot find the react-dom package when trying to resolve imports in your code. The react-dom package is a critical dependency that provides DOM-specific methods for React, including the ability to render components in the browser. The error occurs during the module resolution phase of the build process. When your code imports from 'react-dom' or 'react-dom/client', the bundler searches through your node_modules directory to find the package. If the package is missing, not properly installed, or if there are permission issues, this error will be thrown. This is one of the most common setup errors in React projects, often occurring immediately after cloning a repository, upgrading dependencies, or when moving projects between environments.

How to fix "Module not found: Can't resolve 'react-dom'"

1Install react-dom package

The most common fix is to install or reinstall the react-dom package. Run this command in your project root:

bash

npm install react-dom react

Or if using Yarn:

bash

yarn add react-dom react

Or with pnpm:

bash

pnpm add react-dom react

This installs both react and react-dom to ensure version compatibility. After installation, restart your development server.

2Verify package.json contains react-dom

Check that react-dom is listed in your package.json dependencies:

json

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

The versions of react and react-dom should match. If react-dom is missing or has a different major version, update it:

bash

npm install [email protected]

Replace with the version that matches your React version.

3Clear installation cache and reinstall

If the package appears to be installed but the error persists, clear your installation cache:

bash

# Delete node_modules and lock files
rm -rf node_modules package-lock.json

# Clear npm cache
npm cache clean --force

# Reinstall all dependencies
npm install

For Yarn:

bash

rm -rf node_modules yarn.lock
yarn cache clean
yarn install

After reinstalling, restart your development server and IDE.

4Check for correct import statements

Verify your imports match your React version. For React 18+, the import should be:

javascript

// React 18 and later
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

For React 17 and earlier:

javascript

// React 17 and earlier
import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('root'));

If you're importing 'react-dom/client' but using React 17, either upgrade React or change to the legacy API.

5Verify node_modules installation

Check that the react-dom package actually exists in your node_modules:

bash

# Check if react-dom directory exists
ls node_modules/react-dom

# Verify react-dom package.json
cat node_modules/react-dom/package.json

If the directory is missing or corrupted, reinstall:

bash

npm install react-dom --force

Also check file permissions if you're on Linux/macOS:

bash

sudo chown -R $USER node_modules

How to fix Module not found: Can't resolve 'react-dom' in React

What this error means

Typical symptoms

Common causes

How to fix "Module not found: Can't resolve 'react-dom'"

Advanced notes

Related errors

Official resources & further reading