How to Fix Module Not Found Cannot Resolve Error in Webpack

The error Module not found: Error: Can’t resolve ‘./something’ in Webpack means the bundler couldn’t find a module you imported. It has several causes — missing packages, wrong paths, case sensitivity, or config issues. Here’s how to fix each.

What This Error Means

Webpack builds a dependency graph by following your imports. “Can’t resolve” means it followed an import but couldn’t find the target file or package. The error usually names the module it couldn’t find and the file that imported it — start there.

Cause 1: Package Not Installed

# Error: Can't resolve 'lodash'
# The package isn't installed

# ✅ Install it
npm install lodash

# Verify it's in package.json and node_modules
npm list lodash

# If node_modules is corrupted, reinstall
rm -rf node_modules package-lock.json
npm install

Cause 2: Wrong Relative Path

// 🐛 Wrong path - file is somewhere else
import { helper } from './utils/helper';   // but it's at ./lib/helper

// ✅ Fix the path
import { helper } from './lib/helper';

// Common mistakes:
// - Missing ./ for local files (Webpack looks in node_modules without it)
import x from 'components/Button';    // ❌ looks in node_modules
import x from './components/Button';  // ✅ relative to current file

// - Wrong number of ../ for parent directories
import x from '../../utils/x';        // count directories carefully

Cause 3: Case Sensitivity

// 🐛 Works on Mac/Windows (case-insensitive) but fails on Linux/CI
import Button from './components/button';   // file is Button.jsx

// ✅ Match the exact case of the filename
import Button from './components/Button';   // Button.jsx

// Case mismatches are the #1 cause of "works locally, fails in CI"
// because Linux file systems are case-sensitive

Cause 4: Missing File Extension in Config

// 🐛 Importing without extension, but Webpack doesn't know to try .tsx
import App from './App';   // App.tsx exists but Webpack can't resolve

// ✅ Add extensions to Webpack resolve config
// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
    // Now Webpack tries these extensions when none is specified
  },
};

Cause 5: Path Aliases Not Configured

// 🐛 Using @ alias but Webpack doesn't know it
import Button from '@/components/Button';   // Can't resolve '@'

// ✅ Configure the alias in webpack.config.js
const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

// If using TypeScript, also add to tsconfig.json:
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["src/*"] }
  }
}
// Both must agree - Webpack for bundling, tsconfig for type checking

Cause 6: Importing a Directory Without index File

// 🐛 Importing a folder that has no index file
import { utils } from './helpers';   // ./helpers is a folder

// ✅ Ensure the folder has an index.js/ts, or import the specific file
// ./helpers/index.js exports the utils, OR:
import { utils } from './helpers/utils';   // specific file

Cause 7: Node.js Core Modules in Browser Bundle

// 🐛 Can't resolve 'fs' or 'path' - Node modules don't exist in browsers
// A package tried to use Node.js core modules in browser code

// ✅ In Webpack 5, configure fallbacks or exclude them
module.exports = {
  resolve: {
    fallback: {
      "fs": false,       // not available in browser
      "path": require.resolve("path-browserify"),
      "crypto": require.resolve("crypto-browserify"),
    },
  },
};
// Or find a browser-compatible alternative to the package

Debugging Steps

1. Read the full error — it names the module and the importing file
2. Check the package is installed — npm list <module>
3. Verify the path and case — exact spelling and capitalization
4. Check resolve.extensions — is the file’s extension configured?
5. Check aliases — are @ or other aliases configured in both Webpack and tsconfig?
6. Restart the dev server — config changes require a restart

Frequently Asked Questions

Q: Why does it work locally but fail in CI/production?
A: Almost always case sensitivity — macOS/Windows are case-insensitive, Linux (CI/production) is case-sensitive. ./components/button works locally but fails on Linux if the file is Button.jsx. Always match the exact filename case.

Q: I installed the package but still get “can’t resolve”. Why?
A: Restart the dev server (Webpack caches). Verify the package is actually in node_modules and package.json. If it’s a local import, check the path and case. Delete node_modules and reinstall if the module list looks wrong.

Q: How do I import without specifying file extensions?
A: Add the extensions to resolve.extensions in webpack.config.js (e.g., ['.js', '.jsx', '.ts', '.tsx']). Then Webpack tries each extension when you import without one. Restart the dev server after changing config.

Q: How do I set up @ path aliases?
A: Configure resolve.alias in webpack.config.js (mapping @ to your src directory) AND paths in tsconfig.json if using TypeScript. Both must agree — Webpack for bundling, TypeScript for type checking. Restart after changing.

Q: Why can’t Webpack resolve ‘fs’ or ‘path’?
A: Those are Node.js core modules that don’t exist in browsers. A package is trying to use them in browser code. Configure resolve.fallback in Webpack 5 to provide browser alternatives (or false to exclude), or find a browser-compatible package.

Conclusion

“Module not found: Can’t resolve” in Webpack means the bundler couldn’t find an imported module. Work through the causes: ensure the package is installed, verify the path AND case (case sensitivity causes most CI failures), configure resolve.extensions for extensionless imports, set up path aliases in both Webpack and tsconfig, and handle Node core modules with fallbacks for browser bundles. Read the full error — it names the missing module and the importing file, pointing you to the source. Restart the dev server after config changes. Most cases resolve by fixing the import path (watch the case!) or installing the missing package. Once Webpack can follow the import to a real file, the error clears.