Module not found: Can't resolve '@emotion/react'

Problem Overview

When working with React projects, particularly those using Material-UI (MUI) or emotion-based styling libraries, developers frequently encounter the error:

Module not found: Can't resolve '@emotion/react'

This issue typically occurs when:

• The required Emotion dependencies are missing from the project
• Package versions are incompatible
• The development server cache needs to be cleared
• There are conflicts between different Emotion package versions

Primary Solution: Installing Required Dependencies

The most common solution is to install the necessary Emotion packages:

# Using npm
npm install @emotion/react @emotion/styled

# Using yarn
yarn add @emotion/react @emotion/styled

INFO

You may need to install both @emotion/react and @emotion/styled even if only one appears in the error message, as they are often used together.

Framework-Specific Solutions

For Next.js Projects

Next.js users often need additional steps:

1. Install Material-UI with Emotion dependencies:

   npm install @mui/material @emotion/react @emotion/styled

2. Clear Next.js cache and restart the development server:

   # Option 1: Delete the .next folder
   rm -rf .next
   
   # Option 2: Simply restart the dev server
   npm run dev

3. For server-side rendering support:

   npm install @emotion/cache @emotion/server

For Material-UI (MUI) Projects

When using Material-UI, ensure you have the correct Emotion dependencies:

# Complete MUI installation with Emotion
npm install @mui/material @emotion/react @emotion/styled

Advanced Troubleshooting

If the basic installation doesn't resolve the issue, try these steps:

Clear node_modules

# Remove node_modules and package-lock.json
rm -rf node_modules
rm package-lock.json

# Reinstall dependencies
npm install

Force install

# Force install specific packages
npm install @emotion/react --force
npm install @emotion/styled --force

Specific versions

# Install compatible versions
npm install @emotion/core@10.1.1
npm install @emotion/styled

WARNING

Be cautious when using --force as it may bypass dependency conflicts that should be properly resolved.

Common Scenarios and Solutions

Scenario 1: Recently Added Packages

If you've just installed a new package that depends on Emotion:

1. Restart your development server
2. If the error persists, restart your IDE/editor
3. Clear the build cache (.next folder for Next.js, or similar for other frameworks)

Scenario 2: Version Conflicts

If you're working with legacy code that uses older Emotion packages:

# For projects requiring @emotion/core (legacy)
npm install @emotion/core@10.1.1
npm install @emotion/styled

Scenario 3: Yarn Projects

# Clear yarn cache and reinstall
rm yarn.lock
rm -rf node_modules
yarn install

Verifying the Solution

After implementing any of these solutions, verify that the packages are correctly installed by checking your package.json:

{
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    // Other dependencies...
  }
}

Then restart your development server to ensure the changes take effect.

Prevention Best Practices

1. Check package documentation before installation to identify required peer dependencies
2. Use consistent package managers throughout your project (don't mix npm and yarn)
3. Keep dependencies updated regularly to avoid version conflicts
4. Clear cache after major dependency changes

TIP

When encountering this error, always check if your project uses Next.js or Material-UI first, as they have specific Emotion integration requirements.

By following these steps, you should be able to resolve the "@emotion/react" module resolution error and continue with your development workflow.