Error cannot find module webpack cli bin config yargs

• Operating System: Mac OS

• Node Version: 10.15.1

• NPM Version: 6.4.1

• webpack Version: 4.34.0

• webpack-dev-server Version: 3.2.1

• This is a bug…?

• This is a modification request

Code

// webpack.config.js
const path = require('path');
const config = require('./webpack.dev.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const newConfig = Object.assign({}, config);

newConfig.entry = ['@babel/polyfill', './app/features/Certifications/index', 'webpack/hot/only-dev-server'];

newConfig.output = {
  filename: 'webpack-certifications-bundle.js',
  path: path.resolve('../app/assets/webpack'),
  publicPath: '/',
};

newConfig.devServer = {
  historyApiFallback: true,
  hot: true,
  open: true,
  openPage: 'dashboard',
  port: 9000,
  proxy: {
    '/api': {
      target: 'http://localhost:9010',
      secure: false,
    },
  },
  publicPath: '/',
};

newConfig.plugins.push(new HtmlWebpackPlugin());

module.exports = newConfig;
module.exports.devtool = 'cheap-module-eval-source-map';

// package.json
scripts: {
  "dev:cert:webpack": "NODE_ENV=development webpack-dev-server --config webpack.dev.certifications.config.js"
}

Expected Behavior

Running npm run dev:cert:webpack starts webpack dev server.

Actual Behavior

~/src/projects/client$ npm run dev:cert:webpack

> acl-project-manager@0.0.1 dev:cert:webpack /Users/jamie/src/projects/client
> NODE_ENV=development webpack-dev-server --config webpack.config.js

internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/jamie/src/projects/client/node_modules/webpack-dev-server/bin/webpack-dev-server.js:77:1)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! acl-project-manager@0.0.1 dev:cert:webpack: `NODE_ENV=development webpack-dev-server --config webpack.dev.certifications.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the acl-project-manager@0.0.1 dev:cert:webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jamie/.npm/_logs/2019-06-14T23_23_20_044Z-debug.log

If I upgrade to webpack-dev-server 3.7.1, this error does not occur.

Thank you for your help.

Webpack is a powerful static module bundler that treats all files and assets as modules. Under the hood, it relies on a dependency graph to describe how modules relate to each other using references between files. Then, it uses that graph to “package” multiple JavaScript files into one.

Webpack’s ability to statically traverse all modules allows it to build a graph of all the code, which it then uses to generate a single bundle or several bundles of code. “Webpack’s “static” mode means that it doesn’t execute your source code, but instead stitches modules and their dependencies together into a bundle that you can include in your HTML files.

Beginners who are trying to set up their system for developing modern JavaScript applications often encounter “Cannot find module webpack” error. This article is going to show you several ways to fix the “Cannot find module webpack” in common scenarios.

“Cannot find module webpack” may be one of the most common error when it comes to developing JavaScript programs. What we’re referring to are error messages that has something like “Error: Cannot find module ‘webpack-cli/package.json’” or “Error: Cannot find module ‘webpack/bin/config-yargs’”.

The specific error messages may varies but the reason behind them are the same : Your system cannot recognize webpack in where it supposed to be. It can be your NODE_ENV is not set right, or you’re using a legacy command syntax which webpack deprecated. Read on to find a proper solution for each causes.

Reinstall all modules

There are cases that “Cannot find module webpack” error pops up after a npm install package_name process has been suddenly interrupted.

In this case, you should remove the node_modules directory, package-lock.json (not the package.json), /dist folder. After that, run the following commands to clean npm cache and recreate node_modules.

npm cache clean --force
npm install

Finally, reinstall all modules from scratch, then the error should be gone.

Use global webpack

One of the simplest method to quickly fix “Cannot find module webpack” error is to link your project to the globally installed version of webpack, instead of the local one. You can do that by running the following command.

npm link webpack

In case you didn’t have webpack installed globally, here’s the command to do that.

npm i -g webpack

Set NODE_ENV to development

If your NODE_ENV is not set right, packages managers like yarn might not be able to get your devDependencies installed.

In this case, you can try setting NODE_ENV to development and see if “Cannot find module webpack” error goes away.

In order to do that on Windows, open up the Command Prompt and run set NODE_ENV=development. In Linux, you can simply run a similar command to set NODE_ENV to development for the current bash session :

export NODE_ENV=development
Code language: JavaScript (javascript)

If you want to avoid running the command above over and over again, add it to one of the following files so that Bash can load it at startup.

• ~/.bash_profile
• ~/.bashrc
• ~/.profile

Let’s suppose we are adding the line to ~/.bash_profile, we would run the following commands in a terminal window.

echo export NODE_ENV=development >> ~/.bash_profile
source ~/.bash_profile
Code language: PHP (php)

Install webpack-cli

If your error messages contains webpack-cli, that means you’re missing the Command Line Interface of Webpack instead of Webpack itself. Install webpack-cli system-wide by running the command below.

npm install webpack-cli -g

Check your command syntax

If you’re using webpack-cli 4 or webpack 5, change webpack-dev-server to webpack serve in your package.json, so your start script may look like below.

"serve": "webpack serve --config config/webpack.dev.js --progress"
Code language: JavaScript (javascript)

For webpack-cli 3.x:

"scripts": {
    "start:dev": "webpack-dev-server"
    }
Code language: JavaScript (javascript)

For webpack-cli 4.x:

"scripts": {
    "start:dev": "webpack serve"
    }
Code language: JavaScript (javascript)

Fore more information, check out the official webpack migration tutorial and webpack-dev-server.

We hope that the information above helps you successfully fixed “Cannot find module webpack” error. You may be insterested in our other troubleshooting tutorial such as fix npm: command not found, fix “nodemon: command not found” or fix JSON’s end of file expected