How to fix Cannot find module 'react' in React

Check that your package.json includes React in the dependencies. The dependencies section should look similar to:

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

If React is not listed, add it by installing:

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

React typically comes with react-dom for rendering to the DOM, so install both together.

The most common cause is that node_modules was deleted or never created. Install all dependencies:

npm install
# or
yarn install
# or
pnpm install

This reads your package.json and package-lock.json (or yarn.lock/pnpm-lock.yaml) to download and install all declared dependencies, including React.

For a fresh clone of a repository, always run the install command before attempting to run the project:

git clone https://github.com/user/repo.git
cd repo
npm install  # Required before npm start
npm start

Sometimes package manager caches become corrupted. Clear the cache and perform a clean reinstall:

# npm
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

# yarn
yarn cache clean
rm -rf node_modules yarn.lock
yarn install

# pnpm
pnpm store prune
rm -rf node_modules pnpm-lock.yaml
pnpm install

This ensures you get a fresh download of all packages from the registry.

The module resolution looks for node_modules in the current directory and parent directories. Make sure you're running your command from the project root where package.json exists:

# Check current directory
pwd

# List files to confirm package.json exists here
ls package.json

# If you're in a subdirectory, move to the project root
cd /path/to/project/root

# Now run your command
npm start

If you're using a monorepo with workspaces (Lerna, yarn workspaces, pnpm workspaces), ensure node_modules exists at the root level or in the workspace root.

Verify that the Node.js version being used has access to the correct node_modules:

# Check which Node.js is being used
which node
node --version

# Check where npm is looking for modules
npm root

# Verify node_modules exists at that location
ls -la $(npm root)/../react

# Check NODE_PATH environment variable (if set)
echo $NODE_PATH

If NODE_PATH is set, it may be pointing to the wrong directory. You can temporarily unset it:

unset NODE_PATH
npm start

In most modern Node.js projects, NODE_PATH should not be needed—npm's default module resolution should work.

If you're using a custom bundler configuration (webpack, Vite, Rollup, etc.), ensure it's configured to resolve node_modules correctly.

For webpack, verify webpack.config.js includes:

module.exports = {
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  }
};

For Vite, the default config should work, but check vite.config.js:

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react()]
});

For Next.js, the configuration is automatic, but ensure next.config.js doesn't have conflicting resolver settings.

If you're in a monorepo using npm/yarn/pnpm workspaces, ensure dependencies are properly installed at the workspace root:

# For npm workspaces
npm install -w ./packages/my-app

# For yarn workspaces
yarn install

# For pnpm workspaces
pnpm install

Verify the workspace configuration in your package.json:

{
  "workspaces": [
    "packages/*"
  ]
}

Ensure each package in the workspace that uses React has it listed as a dependency or peerDependency. If React is only in the root, child packages may not be able to resolve it depending on hoisting settings.

For pnpm, which doesn't hoist by default, use:

# pnpm-workspace.yaml
packages:
  - 'packages/*'

pnpm:
  hoistPattern:
    - '*'

If standard module resolution continues to fail, you can sometimes work around it using exact file paths, though this is a temporary workaround only:

// ❌ Standard import (fails if React not found)
import React from 'react';

// Temporary workaround - absolute path (use cautiously)
import React from '/full/path/to/node_modules/react/index.js';

However, this is NOT recommended for production code. Always resolve the underlying issue by ensuring React is properly installed. This workaround is only useful for debugging to confirm the package file itself is intact.