Skip to main content

How to Resolve "Error: Cannot find module 'webpack'" and Related Errors in JavaScript

When working with Webpack, you might encounter several Cannot find module errors, such as for webpack, webpack-cli, or webpack/bin/config-yargs. These errors almost always indicate a problem with your project's local dependencies, i.e. either the packages are not installed, or your node_modules folder is in a corrupted state.

This guide will explain the root cause of these common Webpack errors and provide the definitive, modern solutions. You will learn the best practice of installing Webpack locally (not globally), how to fix the common webpack serve command change, and how to perform a clean reinstall to resolve any stubborn dependency issues.

Core Concept: Local vs. Global Installations​

The most important best practice for modern JavaScript development is to install your build tools locally for each project.

  • Local Installation: The packages are installed inside your project's node_modules folder and are listed in its package.json. This is the recommended approach.
  • Global Installation: The packages are installed in a central location on your machine. This is not recommended as it can lead to version conflicts between different projects.

The Cannot find module error occurs because the command you are running expects to find webpack and its related packages in your local node_modules folder, but they are not there.

Solution 1 (Most Common): Install webpack and webpack-cli Locally​

The error Cannot find module 'webpack' or Cannot find module 'webpack-cli' is a direct signal that these essential packages are missing from your project.

The problem:

  • You are trying to run a Webpack command, but the necessary packages are not in your package.json.

The solution is to open your terminal in the root directory of your project and install webpack and webpack-cli as development dependencies.

For NPM:

npm install --save-dev webpack webpack-cli

For Yarn:

yarn add --dev webpack webpack-cli
  • --save-dev (or -D): This is the crucial flag. It adds the packages to the devDependencies section of your package.json, which is the correct place for build tools.

If you are using the Webpack development server, you should install that as well:

npm install --save-dev webpack-dev-server

Solution 2: Fix the webpack serve vs. webpack-dev-server Command​

A common related error is Cannot find module 'webpack/bin/config-yargs'. This is a legacy error that occurs when you try to run the old webpack-dev-server command with a modern version of Webpack (webpack-dev-server v4+).

Your package.json scripts section has a command that uses the old executable name.

"scripts": {
  "start": "webpack-dev-server --open"
}

The solution in modern Webpack is that the command has been changed to webpack serve. You must update your package.json scripts.

"scripts": {
  "start": "webpack serve --open"
}

After changing the script, you may need to run npm install again to ensure all dependencies are correct.

Solution 3 (for Stubborn Issues): A Clean Reinstall of Dependencies​

If you have already installed the packages but the error persists, your node_modules folder or package lock file might be in a corrupted or inconsistent state. A full, clean reinstall will resolve this.

The solution is to run the following commands from your project's root directory.

For macOS / Linux:

# 1. Remove all dependencies and lock files
rm -rf node_modules
rm -f package-lock.json yarn.lock

# 2. Reinstall all packages from package.json
npm install

For Windows (CMD):

# 1. Remove all dependencies and lock files
rd /s /q "node_modules"
del package-lock.json
del yarn.lock

# 2. Reinstall all packages from package.json
npm install

After reinstalling, restart your code editor and development server.

How to Verify the Installation​

After running the installation, you can confirm everything is correct in two ways:

  1. Check package.json: Your package.json file should now have entries for webpack, webpack-cli, and webpack-dev-server in the devDependencies section. 
    {
      "devDependencies": {
        "webpack": "^5.75.0",
        "webpack-cli": "^5.0.1",
        "webpack-dev-server": "^4.11.1"
      }
    }
  2. Check node_modules: Look inside your node_modules folder. You should see directories for webpack, webpack-cli, etc.

Conclusion​

Webpack-related "Cannot find module" errors are almost always caused by a missing or corrupted local dependency.

To fix them:

  • The primary solution is to install webpack and webpack-cli locally as development dependencies: npm install -D webpack webpack-cli.
  • For the config-yargs error, ensure you are using the modern webpack serve command in your package.json scripts, not the old webpack-dev-server.
  • If the error persists after installation, a clean reinstall of your node_modules folder will resolve any corruption issues.
  • Avoid installing Webpack globally, as this is an outdated practice that leads to versioning conflicts.

Table of Contents