Fix Error: Cannot find module 'react'

If you see the error Cannot find module 'react', don't worry. This is a common issue in React and Node.js projects. It means your system can't locate the React package.

Why does this error occur?

The error happens when Node.js can't find the React module in your project's node_modules folder. This usually occurs because:

1. React isn't installed in your project.

2. The package.json file is missing dependencies.

3. The node_modules folder is corrupted.

4. You're running the wrong version of Node.js.

How to fix the error

Here are several solutions to resolve this issue:

1. Install React in your project

The simplest fix is to install React using npm or yarn. Run this command in your project directory:

npm install react react-dom

Or if you use Yarn:

yarn add react react-dom

2. Check your package.json

Ensure React is listed in your dependencies. Open package.json and look for:

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

If it's missing, add it and run npm install.

3. Delete node_modules and reinstall

Sometimes the node_modules folder gets corrupted. Try this:

rm -rf node_modules
npm install

4. Check your Node.js version

React 18+ requires Node.js 14 or higher. Verify your version:

node -v

5. Global vs local installation

Never install React globally. Always install it locally in each project. If you accidentally installed it globally, remove it:

npm uninstall -g react

Common scenarios

Create React App projects

If you're using Create React App and get this error, try:

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

Next.js projects

For Next.js projects, ensure you have the correct dependencies:

npm install next react react-dom

Preventing the error

To avoid this error in the future:

1. Always run npm install after cloning a project.

2. Don't manually edit node_modules.

3. Keep your package.json updated.

Similar errors can occur with other modules like ESLint or Prettier.

Conclusion

The Cannot find module 'react' error is easy to fix. In most cases, reinstalling React solves the problem. Remember to check your package.json and Node.js version.

If you're working with other frameworks, you might encounter similar errors like Cannot find module 'mongoose'. The solutions are often similar.

Always keep your dependencies updated and your development environment properly configured.