Module not found: Can't resolve 'react-dom/client' Error

The "Module not found: Error: Can't resolve 'react-dom/client'" error occurs when there's a mismatch between your React version and the API you're trying to use. This typically happens when you're using React 18 syntax with an older React 17 installation.

Problem Overview

The error manifests as:

ERROR in ./src/index.js 5:0-40
Module not found: Error: Can't resolve 'react-dom/client'

This happens because the react-dom/client module was introduced in React 18, but your project has React 17 installed. The new API uses:

import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));

While React 17 and earlier versions use:

import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

Solutions

Option 1: Upgrade to React 18 (Recommended)

To properly use the new API, upgrade both React and React-DOM to version 18:

1. Update your package.json:

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

2. Remove node_modules folder and package-lock.json:

rm -rf node_modules package-lock.json

3. Reinstall dependencies:

npm install

TIP

For TypeScript projects, also update the type definitions:

npm install @types/react@18 @types/react-dom@18

Option 2: Downgrade to React 17 Syntax

If you prefer to stay with React 17, modify your index.js to use the legacy API:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

Option 3: Verify Installation After Upgrade

If you've already upgraded but still encounter issues, ensure the packages are properly installed:

npm ls react --depth=0
npm ls react-dom --depth=0

Both should show version 18.x.x. If they don't, run:

npm install react@latest react-dom@latest

Common Pitfalls

WARNING

When using tools like npm-check-updates, remember they only update package.json. You must run npm install afterward to update the actual packages in node_modules.

Version Mismatch

Always ensure react and react-dom versions match exactly. Mixing different major versions will cause compatibility issues.

Migration Guide

React 17 to React 18 Changes

React 17	React 18
import ReactDOM from 'react-dom'	import ReactDOM from 'react-dom/client'
ReactDOM.render(element, container)	ReactDOM.createRoot(container).render(element)
No root API	New root API with improved performance

Troubleshooting

If you continue to experience issues:

1. Clear your package manager cache:

   npm cache clean --force

2. Delete node_modules and reinstall:

   rm -rf node_modules && npm install

3. Check for duplicate React installations:

   npm ls react
   npm ls react-dom

The "Module not found: Can't resolve 'react-dom/client'" error is a common version compatibility issue that's easily resolved by ensuring your React version matches the API you're using. Upgrading to React 18 is recommended for access to the latest features and performance improvements.