Module not found in React - Fix Import Errors (2026) | Tutorials Logic

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.

Error Message:
Module not found: Error: Can't resolve './components/Button' in '/src'
Module not found: Error: Can't resolve 'axios' in '/src'

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)

Quick Solution

# 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

Scenario 1: Package Not Installed

Problem

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

Solution

# 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

Scenario 2: Wrong File Path

Problem

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

Solution

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

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

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

Scenario 3: Case Sensitivity Issue

Problem

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

Solution

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

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

Scenario 4: After Cloning a Repository

Problem

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

Solution

git clone https://github.com/user/project
cd project
npm install  # ✅ 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

Related Errors

Key Takeaways

"Module not found" means the build tool cannot locate a file or package you're importing
For missing packages, run npm install package-name to install them
File paths are case-sensitive on Linux/Mac — match the exact filename case
Always run npm install after cloning a repository or pulling changes
Use IDE autocomplete for import paths to avoid typos
Set up path aliases like @/components to avoid long relative paths