Module not found in React Fix Import Errors: Causes and Fixes

What is This Error?

The "Module not found" error occurs when React's build tool (Webpack/Vite) cannot locate a file or package you're trying to import. This is a compile-time error that prevents your app from building.

Common Causes

Wrong file path in import statement
Package not installed (missing from node_modules)
Typo in package name or file name
Case sensitivity mismatch (Button.jsx vs button.jsx)
File was deleted or renamed but import wasn't updated

Quick Fix (TL;DR)

Immediate Fix: For missing packages

# For missing packages
npm install package-name

# For path issues "" check the exact path
ls src/components/  # Verify file exists and check exact name

# Clean install if node_modules is corrupted
rm -rf node_modules package-lock.json
npm install

Common Scenarios & Solutions

Failure: Module not found: Can't resolve 'axios

import axios from 'axios';  // Module not found: Can't resolve 'axios'
import { motion } from 'framer-motion';  // Not installed!

Correction: Install the missing package

# Install the missing package
npm install axios
npm install framer-motion

# Or install multiple at once
npm install axios framer-motion react-router-dom

# Verify it's in package.json after installing
cat package.json | grep axios

Failure: File is at: src/components/Button/Button.jsx

// File is at: src/components/Button/Button.jsx
import Button from './Button';           // Wrong Wrong path
import Button from '../components/btn';  // Wrong Wrong name
import Button from './components/Button' // Wrong Missing leading ./

Correction: Correct relative path from current file

// Correct Correct relative path from current file
import Button from '../components/Button/Button';

// Correct Or if there's an index.js in the folder
import Button from '../components/Button'; // Resolves to index.js

// Correct Use path aliases (configure in vite.config.js or jsconfig.json)
import Button from '@/components/Button';

Failure: File on disk: UserProfile.jsx

// File on disk: UserProfile.jsx
import UserProfile from './userprofile';  // Wrong Works on Windows, fails on Linux/Mac!
import UserProfile from './Userprofile';  // Wrong Wrong case

Correction: Match exact case of filename

// Correct Match exact case of filename
import UserProfile from './UserProfile';  // Exact match

// Best practice: Use PascalCase for component files
// UserProfile.jsx, Button.jsx, NavBar.jsx

Failure: Github.com/user/project

git clone https://github.com/user/project
cd project
npm start  # Module not found errors everywhere!

Correction: Github.com/user/project

git clone https://github.com/user/project
cd project
npm install  # Correct Install all dependencies first!
npm start

Best Practices to Avoid This Error

Use IDE autocomplete for imports - VS Code suggests correct paths automatically
Always run npm install after cloning - node_modules is in .gitignore
Use consistent naming conventions - PascalCase for components, camelCase for utilities
Set up path aliases - Use @/components instead of ../../components
Keep package.json updated - Run npm install after pulling changes
Use index.js barrel files - Simplify imports from component folders
Check .gitignore - Ensure node_modules is ignored but package.json is committed

Before you move on

Module not found in React Fix Import Errors: Causes and Fixes Mastery Check

4 checks

Compare the import text with the real file path, filename casing, and exported symbol.
Confirm the dependency appears in the correct package manifest and installs from the committed lockfile.
Verify TypeScript path aliases and bundler aliases resolve identically in development, tests, and production.
Reproduce the error on a clean checkout before deleting caches or changing resolver configuration.

Try this next

React JS Module Not Found Repair Drills

0 of 2 completed

Verify a local module path
Correct path casing, file extension, and export style for a local component, then prove the import on a clean checkout. Compare the import text character by character with the real path and exported symbol.
Repair package resolution
Confirm the dependency belongs in the correct workspace package, inspect its exports map, reinstall from the lockfile, and run both tests and the production build. Deleting caches is justified only after manifest and resolver configuration are correct.

React JS Questions Learners Ask

The import path still points to the old filename, old folder, or old letter casing. React's build tool resolves exactly what the import string says; it does not know that Header.jsx was renamed to SiteHeader.jsx unless every import is updated.

Windows usually treats Button.jsx and button.jsx as the same path, while Linux treats them as different files. A deployment server, CI runner, or Docker container may therefore fail even though local development worked.

In a Vite React project, configure resolve.alias in vite.config.js and mirror the alias in jsconfig.json or tsconfig.json so the editor understands it too. For example, @ can point to src.

Previous Next