PromptHub
Back to Errors
Frontend Beginner 128 views

Webpack Module Not Found

Webpack cannot resolve a module or file imported in the code.

Explanation

Webpack Module Not Found occurs when Webpack's module resolver cannot locate a file or package that is imported in the code. This is common in React, Vue, and other frontend projects that use Webpack for bundling. Common causes include missing npm packages (node_modules), incorrect import paths, typos in file names, missing file extensions, circular dependencies, and misconfigured resolve aliases. The error message shows the exact import path that failed.

Common Causes

  • Missing npm package
  • Incorrect import path
  • File doesn't exist at path
  • Webpack alias not configured
  • File extension missing

Solution

Run npm install or yarn install to ensure all dependencies are installed. Check import paths for typos and correct relative paths. Verify the file exists at the specified path. For aliased imports, check webpack.config.js resolve.alias configuration. Add file extensions to resolve.extensions if needed. Check for missing peer dependencies. Clear node_modules and reinstall: rm -rf node_modules && npm install. Check if the package is listed in package.json dependencies.

Code Example 

// Webpack Module Not Found
import Button from './components/Button';  // file doesn't exist!

// Fix: check file path
import Button from './components/Button.tsx';

// Or ensure file exists at path
// src/components/Button.tsx
export default function Button() { ... }

// Missing npm package
import { format } from 'date-fns';  // not installed!

// Fix: install package
npm install date-fns

// Webpack alias configuration
// webpack.config.js
module.exports = {
    resolve: {
        alias: {
            '@components': path.resolve(__dirname, 'src/components'),
            '@utils': path.resolve(__dirname, 'src/utils'),
        },
        extensions: ['.tsx', '.ts', '.js', '.jsx'],
    }
};

// Then use alias
import Button from '@components/Button';

// Clear and reinstall
rm -rf node_modules package-lock.json
npm install

Error Information

Language

javascript

Difficulty

Beginner

Views

128

Related Errors

ENOENT Node.js

ENOENT: No Such File or Directory

The operating system cannot find the specified file or directory.
ERR_MODULE_NOT_FOUND Node.js

ERR_MODULE_NOT_FOUND

Node.js cannot find the specified ES module file.
Frontend

WebSocket Connection Failed

The WebSocket connection could not be established or was closed unexpectedly.
Database

TypeORM/SQLAlchemy EntityNotFoundError

The ORM cannot find the requested entity or model in the database.
All tools