"Module Not Found" in React

Your React app won't start. The terminal says something like:

Module not found: Error: Can't resolve './components/Dashboard' in '/src/pages'

Or maybe:

Module not found: Can't resolve 'react-icons/fa'

This means your code is trying to import something that doesn't exist where it's looking. There are a few distinct causes, and the fix depends on which one you're dealing with.

Cause 1: The file doesn't exist

If the error says Can't resolve './something' (with a dot-slash), it's looking for a local file. The most common reasons:

• Typo in the filename. Dashboard vs DashBoard vs dashboard. On Mac, this might work locally (macOS is case-insensitive) but break on Linux (your deploy server), which is case-sensitive.
• Wrong path. The file exists but the relative path is wrong. ./components/Dashboard looks in the current directory's components folder. If you're in src/pages/, it looks for src/pages/components/Dashboard — not src/components/Dashboard.
• Missing file extension. Some setups need ./Dashboard.jsx instead of ./Dashboard.
• AI generated an import for a file it didn't create. This is extremely common. AI writes import Dashboard from './components/Dashboard' but never actually generates the Dashboard component file.

How to fix: Check that the file actually exists at the exact path specified. Use your file explorer or ls to verify. Pay attention to capitalization — it matters on Linux.

# Check if the file exists
ls src/components/Dashboard*

# See what's actually in the directory
ls src/components/

Cause 2: The package isn't installed

If the error says Can't resolve 'some-package-name' (no dot-slash), it's looking for an npm package. This means the package isn't installed.

AI code generators do this all the time. They import packages that aren't in your package.json. The AI knows the package exists, writes code that uses it, but doesn't install it.

How to fix:

# Install the missing package
npm install react-icons

# Or if it's a dev dependency
npm install --save-dev @types/react

If you're not sure what the right package name is, search npm: npm search react-icons. Sometimes AI uses an outdated or wrong package name.

Cause 3: The package exists but the import path is wrong

Some packages changed their import structure between versions. AI might generate imports based on an older version:

// Old way (might not work in newer versions):
import { Button } from 'react-bootstrap/lib/Button';

// New way:
import { Button } from 'react-bootstrap';
import Button from 'react-bootstrap/Button';

How to fix: Check the package's current documentation for the correct import syntax. The README on npm or GitHub will show you.

Cause 4: node_modules is corrupted or incomplete

Sometimes the package is in package.json but didn't install properly. This happens after interrupted installs, version conflicts, or switching between npm and yarn.

How to fix:

# Nuclear option: delete and reinstall everything
rm -rf node_modules package-lock.json
npm install

This solves a surprising number of "module not found" errors. If it doesn't, the problem is genuinely a wrong import path or missing package.

Cause 5: Webpack/Vite alias misconfiguration

If your project uses path aliases like @/components/Dashboard, those need to be configured in your build tool (webpack, Vite, or tsconfig). AI loves to use @/ imports because they look clean, but it doesn't always set up the configuration correctly.

For Vite (vite.config.js):

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'),
        },
    },
});

For TypeScript (tsconfig.json):

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        }
    }
}

Both need to match. If Vite knows about @/ but TypeScript doesn't (or vice versa), you'll get errors in different contexts.

The AI pattern

AI-generated React code has a specific import problem: it writes imports for an idealized project structure that may not match your actual project. It assumes files exist that it didn't create, packages are installed that aren't, and path aliases are configured that weren't set up.

When you get a "module not found" error in AI-generated code, the first question is always: does the thing it's trying to import actually exist? Half the time, the answer is no — and the fix is to either create it or remove the import.