Fixing “Module not found: Error: Can’t resolve ‘react-dom'” Error

This error occurs when your project can’t find the react-dom package. Here are several ways to resolve it:

Common Solutions

1. Install Missing Dependencies

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

2. Check React Version Compatibility

Ensure your react and react-dom versions match in package.json:

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

3. Clean and Reinstall Dependencies

rm -rf node_modules package-lock.json
npm install

Advanced Troubleshooting

1. Verify Installation Location

Check if react-dom exists in your node_modules:

ls node_modules/react-dom

2. Check Webpack Configuration

If using Webpack, ensure it’s configured to resolve React dependencies:

// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

3. Verify Import Statements

Ensure correct import syntax:

import ReactDOM from 'react-dom/client'; // React 18+
// or
import ReactDOM from 'react-dom'; // React 17 and below

Specific Scenarios

For Create React App Projects

npx create-react-app@latest my-app --template typescript
cd my-app
npm start

For Next.js Projects

npm install next react react-dom

For Vite Projects

npm create vite@latest my-app --template react
cd my-app
npm install

Additional Checks

1. Verify Node.js version (recommended: 16.x or higher)
2. Check for typos in package.json
3. Ensure you’re not in a nested directory without its own node_modules

If the issue persists after trying these solutions, consider:

• Checking your project’s specific framework requirements
• Reviewing any custom webpack/babel configurations
• Creating a fresh project and migrating your code