Frontend Beginner 13 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

Related Errors

ERR_REQUIRE_ESM Node.js

Webpack Module Not Found

Explanation

Common Causes

Solution

Code Example

Error Information

Related Errors

ERR_REQUIRE_ESM

SyntaxError: Unexpected Token

Content Security Policy Violation

WebSocket Connection Failed