Module not found – Cannot find module ‘react’

This common React error occurs when your project can’t locate the React dependencies. Here’s how to systematically resolve it:

Primary Solutions

1. Install Missing Dependencies

# For npm users
npm install react react-dom

# For Yarn users
yarn add react react-dom

2. Verify Node Modules

# Delete node_modules and reinstall
rm -rf node_modules/ package-lock.json
npm install

# Alternative for Yarn
rm -rf node_modules/ yarn.lock
yarn install

Advanced Troubleshooting

3. Check Import Statements

// Correct import syntax
import React from 'react';
import ReactDOM from 'react-dom/client';

// For React 17+ with new JSX transform (check your tsconfig/jsconfig)
import { createRoot } from 'react-dom/client';

4. Verify Package.json Configuration

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  }
}

Project Structure Issues

5. Check File Location

Correct project structure:
my-app/
├── node_modules/
├── src/
│   ├── App.js
│   └── index.js
├── package.json
└── package-lock.json

6. Module Resolution Paths

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "react": ["./node_modules/react"],
      "react-dom": ["./node_modules/react-dom"]
    }
  }
}

Environment-Specific Fixes

7. Create React App Solutions

# If using Create React App
npx create-react-app@latest my-app --template typescript
cd my-app
npm start

8. Monorepo Configuration (Lerna/Yarn Workspaces)

// package.json
{
  "workspaces": ["packages/*"],
  "private": true
}

# Run from root
yarn install

Cache and System Issues

9. Clear Cache

npm cache clean --force
yarn cache clean

10. Reinstall CLI Tools

# For Create React App
npm uninstall -g create-react-app
npm install -g create-react-app@latest

# For Vite
npm uninstall -g vite
npm install -g vite@latest

Version Conflict Resolution

11. Check Version Compatibility

npm ls react
npm ls react-dom

12. Force Resolutions (Yarn)

{
  "resolutions": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

Webpack Configuration

13. Verify Webpack Aliases

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      react: path.resolve('./node_modules/react'),
      'react-dom': path.resolve('./node_modules/react-dom')
    }
  }
};

Common Mistakes to Avoid

1. Incorrect Working Directory

• Always run commands from project root (where package.json is)

1. Mixed Package Managers

• Don’t mix npm and yarn in the same project

1. Corrupted Installations

• Delete lock files and node_modules when troubleshooting

1. Path Case Sensitivity

• Ensure correct case in imports (React not react)

1. Symlink Issues

• Avoid symlinking node_modules across projects

Verification Steps

1. After applying fixes:

npm ls react --depth=0

Should show the installed React version without errors.

2. Create a simple test file:

// test-react.js
import React from 'react';
console.log('React version:', React.version);

Run with:

node test-react.js