How to fix Cannot find module 'react' in TypeScript

Install or reinstall React along with its TypeScript type definitions:

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

For yarn users:

yarn add react react-dom
yarn add -D @types/react @types/react-dom

For pnpm users:

pnpm add react react-dom
pnpm add -D @types/react @types/react-dom

Verify the installation by checking your package.json:

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0"
  }
}

Ensure your tsconfig.json has the correct moduleResolution setting. Use 'node' for most React projects:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "skipLibCheck": false
  }
}

For modern Node.js projects (Node 16+), you can use:

{
  "compilerOptions": {
    "moduleResolution": "node16"
  }
}

If the error persists after installing React, clean your node_modules and lockfile, then reinstall:

# For npm
rm -rf node_modules package-lock.json
npm install

# For yarn
rm -rf node_modules yarn.lock
yarn install

# For pnpm
rm -rf node_modules pnpm-lock.yaml
pnpm install

After reinstalling, restart your TypeScript language server:

- VS Code: Press Ctrl+Shift+P (Cmd+Shift+P on Mac), then select 'TypeScript: Restart TS server'
- WebStorm: File > Invalidate Caches / Restart

Check that your TypeScript version is compatible with your React types. React 18 type definitions require TypeScript 4.5 or higher:

# Check TypeScript version
npx tsc --version

# Check installed React types version
npm list @types/react

If your TypeScript version is outdated, upgrade it:

npm install -D typescript@latest

For Create React App projects, ensure you have the correct TypeScript setup:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

React 18 and newer require Node.js 14 or higher. Verify your Node.js version:

node --version

If you're using an older version, upgrade Node.js using nvm (recommended):

# Install nvm first if not installed
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# Install and use Node.js LTS
nvm install --lts
nvm use --lts

After upgrading Node.js, reinstall your dependencies:

rm -rf node_modules package-lock.json
npm install

If the issue persists, use TypeScript's module resolution tracing to diagnose the problem:

npx tsc --traceResolution --noEmit | grep -i react

This will show you exactly where TypeScript is looking for the React module and why it's failing. Common issues revealed by tracing:

- TypeScript is looking in the wrong directory
- The moduleResolution strategy is not finding node_modules
- Type definitions are installed but in an unexpected location

You can also check if TypeScript can find React at all:

npx tsc --showConfig