How to Solve the Error “Cannot find module ‘webpack/bin/config-yargs'” in Javascript?

The problem “Cannot find module ‘webpack/bin/config-yargs'” occurs very often when configuring webpack because some packages are incompatible due to version issues. Learn how to solve it with the explanation below.

What causes the error “Cannot find module ‘webpack/bin/config-yargs'”?

The problem occurs when the version of webpack or webpack-cli is incompatible with the webpack-dev-server registry.

But first, let’s see what webpack, webpack-cli, and webpack-dev-server are:

Webpack is a tool to bundle Javascript applications. When processing your application, webpack internally builds a dependency graph from one or more entry points and wraps all your assets, like fonts, images, and files… into one or more bundles, which are static assets to serve your content.

Webpack-cli is an npm registry that provides the ability to configure webpack via the cli because, since version 4, webpack doesn’t expect a configuration file to bundle your project. Still, developers often want to create a more custom webpack configuration based on their use cases and needs.

Webpack-dev-server is a development server that provides live reloading. It can be used to quickly and frequently develop applications in order to improve developer experience.

Configuring webpack manually if you are a beginner will take a lot of work. You can read common webpack errors like command not found, Cannot Find Module ‘Webpack’.

How to solve this error?

Check your current webpack-cli version

Typing this command in the console in the project’s root directory (where your package.json file is located):

webpack --version

It will output the following result.

webpack 5.31.2
webpack-cli 4.6.0

For webpack-cli 3.x (or lower). Change this command script in the package.json file.

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

For webpack-cli 4.x (or higher). Change this command script in the package.json file.

{
   . . .
   "scripts": {
     . . .            
     "start:dev": "webpack serve"
   }
}

Then re-run this command again to run the webpack dev server.

npm run start:dev
yarn run start:dev

Update the latest webpack, webpack-cli, and webpack-dev-server

The latest version is stable so that you can avoid unexpected errors.

Run this command below. It will update the latest version of webpack, webpack-cli, and webpack-dev-server packages in the devDependencies property in the package.json file.

npm install webpack webpack-cli webpack-dev-server --save-dev
yarn add webpack webpack-cli webpack-dev-server --save-dev

And in the package.json file.

{
   . . .
   "scripts": {
     . . .            
     "start:dev": "webpack serve"
   }
}

Summary

The problem “Cannot find module ‘webpack/bin/config-yargs'” is common when configuring webpack and occurs when a webpack-cli version is incompatible with webpack-dev-server. The best solution is constantly updating the webpack to the latest version to avoid unexpected errors. If you have any questions, please feel free to leave us a comment below.

Otis Manders

My name is Otis Manders, and I like programming and sharing my skills. Java, Javascript, and others are some of my strong programming languages that I can share with everyone. In addition, I have created applications with the React library, HTML, CSS, and Javascript.

Name of the university: UTC
Programming Languages: C, C++,Java, Javascript, Html, Css