How to fix Cannot find module 'react' in TypeScript

TypeScriptINTERMEDIATEHIGHUpdated Dec 9, 2025· 144 views

This error occurs when TypeScript cannot locate the React module during compilation. It typically happens because React and its type definitions are not installed, or the moduleResolution setting in tsconfig.json is misconfigured.

Quick fix

Fixes Cannot find module 'react'

npm install react react-dom
npm install -D @types/react @types/react-dom
  1. Install React and React type definitions
  2. Configure moduleResolution in tsconfig.json
  3. Clean and reinstall dependencies
  4. Verify TypeScript and React version compatibility
typescript — error
npm install react react-dom
npm install -D @types/react @types/react-dom
Cannot find module 'react'

What this error means

The 'Cannot find module react' error indicates that TypeScript's module resolution system failed to locate the React package in your node_modules directory. This error can occur even if React is installed but the corresponding TypeScript type definitions (@types/react) are missing. TypeScript requires both the runtime package and type definitions to provide type safety and IntelliSense for third-party libraries. When either component is missing or misconfigured, TypeScript cannot understand the React module structure and throws this error during compilation or when your IDE performs type checking.

Typical symptoms

  • Import statements for React are underlined with red squiggles in your editor
  • TypeScript compilation fails with 'Cannot find module react' or 'Cannot find module react or its corresponding type declarations'
  • The error appears in both component files and test files importing React
  • React is listed in package.json but TypeScript still cannot find it
  • Error occurs after upgrading TypeScript, React, or Node.js versions
  • IDE shows errors but the application runs fine with JavaScript

Common causes

  1. React package is not installed in node_modules (most common)
  2. @types/react type definitions are not installed
  3. node_modules directory is corrupted or incomplete
  4. moduleResolution is set to 'classic' instead of 'node' in tsconfig.json
  5. TypeScript version is incompatible with installed React types
  6. React is installed but node_modules was not committed (in CI/CD environments)
  7. Using an outdated or incompatible Node.js version
  8. package-lock.json or yarn.lock is out of sync with package.json

How to fix "Cannot find module 'react'"

1Install React and React type definitions

Install or reinstall React along with its TypeScript type definitions:

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

For yarn users:

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

For pnpm users:

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

Verify the installation by checking your package.json:

json
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0"
  }
}
2Configure moduleResolution in tsconfig.json

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

json
{
  "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:

json
{
  "compilerOptions": {
    "moduleResolution": "node16"
  }
}
3Clean and reinstall dependencies

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

bash
# 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

4Verify TypeScript and React version compatibility

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

bash
# Check TypeScript version
npx tsc --version

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

If your TypeScript version is outdated, upgrade it:

bash
npm install -D typescript@latest

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

bash
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
5Check Node.js version compatibility

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

bash
node --version

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

bash
# 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:

bash
rm -rf node_modules package-lock.json
npm install
6Use TypeScript tracing for debugging

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

bash
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:

bash
npx tsc --showConfig

Advanced notes

Type Definition Versions: The @types/react package should match your React major version. React 18.x should use @types/react@18.x. Mismatched versions can cause subtle type errors even if the module resolves. skipLibCheck Workaround: Setting skipLibCheck to true in tsconfig.json can mask this error but is not recommended as it skips type checking for all declaration files, potentially hiding other issues. Monorepo Setup: In monorepo environments using workspaces, ensure that React is installed at the correct level (root vs. package) and that TypeScript can resolve cross-package dependencies. Use the references field in tsconfig.json for project references. Next.js Specific: Next.js projects automatically include React type definitions, but if you're setting up a custom TypeScript configuration, ensure you don't override the built-in settings. Next.js uses moduleResolution: 'bundler' by default in newer versions. CI/CD Environments: In continuous integration pipelines, this error often occurs when node_modules is not cached properly or when the install step fails silently. Always verify that npm install or yarn install completes successfully before running TypeScript compilation.

Frequently asked questions

What does "Cannot find module 'react'" mean?
The 'Cannot find module react' error indicates that TypeScript's module resolution system failed to locate the React package in your node_modules directory. This error can occur even if React is installed but the corresponding TypeScript type definitions (@types/react) are missing. TypeScript requires both the runtime package and type definitions to provide type safety and IntelliSense for third-party libraries.
How do I fix "Cannot find module 'react'"?
This error occurs when TypeScript cannot locate the React module during compilation. It typically happens because React and its type definitions are not installed, or the moduleResolution setting in tsconfig.json is misconfigured.
What causes "Cannot find module 'react'"?
React package is not installed in node_modules (most common) @types/react type definitions are not installed node_modules directory is corrupted or incomplete
Is the "Cannot find module 'react'" error serious?
Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Official resources & further reading