React 'Module not found: Error: Can't resolve' — 3 fixes that actually work

1. You forgot the file extension (or Webpack can't find it)

This is the one I see most often. You write import Button from './components/Button' and Webpack says nope, can't find it. But the file is there, you swear.

Here's the deal: modern Webpack configs, especially in Create React App, let you skip file extensions for JS and JSX files. But if you're using TypeScript (.tsx or .ts) or CSS modules (.module.css), you need the extension. Had a client last month who spent an hour chasing a missing import — his component was Dashboard.tsx but he wrote import Dashboard from './Dashboard'. Webpack's resolve extensions didn't include .tsx because his config was custom.

The fix: Check your Webpack config's resolve.extensions array. It should look like this:

// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
  }
};

If you're using Create React App, you can't modify Webpack directly without ejecting. But the default config already handles .js, .jsx, .ts, .tsx, and .json. If you're still getting the error, add the extension manually in the import:

// Bad — Webpack might miss it
import Dashboard from './Dashboard';

// Good — explicit extension
import Dashboard from './Dashboard.tsx';

I've seen this mostly with TypeScript projects where someone copied a JS import pattern. Always add the extension for non-JS files.

2. The path is wrong — case sensitivity or typo

This one's tricky because it works on Mac but breaks on Linux or in CI. Webpack's file resolution is case-sensitive on Linux but case-insensitive on Mac (by default). So import Button from './components/button' works on your MacBook but fails on the production server.

A couple years ago I had a client whose React app built fine locally but crashed on the deployment server. Turned out a junior dev had typed ./Services/API but the folder was ./services/api. Mac didn't care. Linux did.

The fix: Match the case exactly. Use your IDE's autocomplete to avoid typos. Also check for:

• Missing ./ for relative paths — import X from 'components/Button' looks in node_modules, not your local folder
• Extra slashes — import X from './components//Button' is bad
• Wrong file name — button.js vs Button.js (Linux cares about case)

Pro tip: run ls -la ./components/ in your terminal and compare the exact filename to what you wrote. I've lost count of how many times a trailing s on a folder name was the culprit.

3. You forgot to install the npm package

This one's embarrassing but it happens to everyone. You add import axios from 'axios' but never ran npm install axios. Webpack looks in node_modules, finds nothing, and throws the error.

The error message usually says Can't resolve 'axios' — the package name appears directly. If it's a relative path like ./something, it's not this cause. But if it's a bare module name (no ./ or /), you missed an install.

The fix: Check package.json for the dependency. If it's missing, run:

npm install package-name
# or if you're on yarn
 yarn add package-name

Sometimes you have the package but it's in devDependencies when it should be in dependencies. Move it with npm install --save package-name instead of --save-dev. I've seen this happen with react-router-dom — someone did npm install --save-dev react-router-dom by accident and the build broke in production.

Also check for version conflicts. If you have react@16 and react-router-dom@6, that's fine, but if you have two different versions of the same package in node_modules (thanks npm dedupe), Webpack might pick the wrong one. Delete node_modules and package-lock.json, then run npm install fresh.

Quick-reference summary table

That's it. Next time you see this error, run through these three in order. Nine times out of ten, it's one of them.