Webpack cli ошибка

I want to make es6 into my project so I used this tutorial this tutorial
and when i try to write ‘webpack’ in cmd I get the error

    Done in 8.99s.
{ Error: Cannot find module 'webpack-cli'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at runCommand.then.result (C:\Users\adirz\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:62:14)
    at process._tickCallback (internal/process/next_tick.js:109:7) code: 'MODULE_NOT_FOUND' }

package.json

   {
  "name": "functions",
  "scripts": {
    "build": "tsc",
    "serve": "npm run build && firebase serve --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "~5.12.0",
    "firebase-functions": "^1.0.1"
  },
  "devDependencies": {
    "ts-loader": "^4.2.0",
    "typescript": "^2.5.3",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-node-externals": "^1.7.2"
  },
  "private": true
}

my folder structure

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Pick a username

Email Address

Password

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

Использую webpack при создании landingpage
webpack.config.js

const path = require('path')

module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '.dist'),
        publicPath: './dist'
    },
    devServer: {
        overlay: true
    }
}

package.json

{
  "name": "mercedes-benz",
  "version": "1.0.0",
  "description": "test-task",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },
  "author": "panteleenko.sergey@gmail.com",
  "license": "MIT",
  "devDependencies": {
    "path": "^0.12.7",
    "webpack": "^5.1.3",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  }
}

yarn run build отработал и все собралось
yarn ren dev ошибка

$ yarn run dev
yarn run v1.22.5
$ webpack-dev-server --open --mode development
internal/modules/cjs/loader.js:983
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'    
Require stack:
- D:\[My]Project\Mercedes-Benz\node_modules\webpack-dev-serv
er\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cj
s/loader.js:980:15)
    at Function.Module._load (internal/modules/cjs/loader.js
:862:27)
    at Module.require (internal/modules/cjs/loader.js:1042:1
9)
    at require (internal/modules/cjs/helpers.js:77:18)      
    at Object.<anonymous> (D:\[My]Project\Mercedes-Benz\node
_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1) 
    at Module._compile (internal/modules/cjs/loader.js:1156:
30)
    at Object.Module._extensions..js (internal/modules/cjs/l
oader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32) 
    at Function.Module._load (internal/modules/cjs/loader.js
:899:14)
    at Function.executeUserEntryPoint [as runMain] (internal
/modules/run_main.js:74:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\[My]Project\\Mercedes-Benz\\node_modules\\webpack-d
ev-server\\bin\\webpack-dev-server.js'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documenta
tion about this command.

в чем проблема?

Error: cannot find module ‘webpack-cli/bin/config-yargs’ is an error that occurs because “webpack-dev-server” cannot find Webpack CLI due to a configuration error or software compatibility issues.

This article will explain different factors that will cause this error in your coding environment and solutions you can use depending on your use case.

After reading this article, you’ll know how to solve the error and how you can prevent it in the future because we’ll teach what you won’t find elsewhere. Now, get your project ready, and let’s fix this Webpack error.

Why “webpack-dev-server” cannot find the Webpack CLI?

“Webpack-dev-server” cannot find the Webpack because of the following:

• You did not install Webpack CLI
• Compatibility of Webpack CLI and the server
• You’re using a new Webpack with an old “package.json”
• You installed Webpack CLI globally
• Your “package.json” or “node_modules” is missing or corrupt

– You Did Not Install Webpack Cli

When you don’t install the Webpack CLI, the development server cannot find it when you run “npm start”. That’s because the development server will need the Webpack CLI to serve your webpack-bundled project on your local machine.

At the same time, it will also need the webpack-dev-middleware to handle compilation, and all this will only happen when you install the CLI. This makes the “webpack-dev-server” a wrapper around the Webpack CLI and if you don’t install it, you’ll get “error: cannot find module ‘webpack-cli/bin/config-yargs’” when you run “npm start”.

– Compatibility of Webpack Cli and the Server

The compatibility of the Webpack CLI and the server is all about version mismatch. So, if the version of your “webpack-dev-server” is not compatible with the version of your Webpack CLI, it can prevent the server from starting or functioning properly.

As a result, every time you run the “npm start” command, the development server will complain that it could not find the Webpack CLI.

For example, “webpack-dev-server” version “3.11.0” does not work with Webpack CLI version “4.0.0-rc.0”, so if you have this combination in your project, you’ll get an error when you start the server.

– You’re Using a New Webpack With an Old “package.json”

A new Webpack installation with an old “package.json” can lead to the cannot “module ‘webpack-cli/bin/config-yargs’” error. That’s because a Webpack update can cause breaking changes in your code base, and the authors can introduce a new way to perform a specific action.

You’ll find these changes in your “package.json” file and if it’s not up-to-date, the development server will not start. For example, before Webpack v5 and Webpack CLI v5, you can start the server using “webpack-dev-server”, but this does not work anymore and will throw an error.

– You Installed Webpack Cli Globally

A global installation of the Webpack CLI can prevent Webpack from finding it when you need it in your project. That’s because the CLI allows you to use Webpack in various modes, generate stats files or rebuild the bundle when the project dependencies change.

However, if it is installed globally, it’ll reside in the global “node_modules” folder and not the “node_modules” folder of your project. Therefore, when you call “npm start” you’ll get see “error: cannot find module ‘webpack-cli/bin/config-yargs’” in your command line or terminal because it’s not in your project.

– Your “package.json” or “node_modules” Is Missing or Corrupt

Your “node_modules” folder is where your package managers, like npm and yarn, store your installed packages like Webpack and the Webpack CLI. If this folder is missing or corrupt, Webpack cannot find the necessary modules like the CLI, and you’ll get the “cannot find module error”.

This same applies to the “package.json” which is a manifest that keeps track of project dependencies. Like the “node_modules” folder, if anything happens to the “package.json” file, Webpack will find it difficult to start and can throw the “error: cannot find module ‘webpack-cli/bin/config-yargs’” message.

How “Webpack-dev-Server” Can Find the Webpack CLI

The “Webpack-dev-server” server will find the Webpack CLI if you do the following:

• Install Webpack using npm or yarn package managers
• Use a compatible Webpack CLI with the development server
• Update the “scripts” object in “package.json”
• Fix or repair your “package.json” and “node_modules” folder



– Install Webpack Using Npm or Yarn Package Managers

The first solution when the development server cannot find the Webpack CLI is to install it. By doing this, the installation process will add it to your project’s “package.json” file, and it will install it in the “node_modules” folder. To install the CLI, use the following steps:

1. Open your terminal
2. Type and run the following command: “npm install –save-dev webpack-cli”
3. Use “yarn add webpack-cli -D

The yarn or npm command will install the CLI as a development dependency in your project, and you’ll find it in the “devDependencies” section of your “package.json” file.

– Use a Compatible Webpack Cli With the Development Server

To use a compatible Webpack CLI with Webpack, you should check their version number using “npm list webpack-cli” and “npm list webpack-dev-server”. Note their version, and compare them to the version of Webpack CLI and the server that should work together without an error.

When the CLI is incompatible with your server, you can upgrade or downgrade either. The following is how to downgrade Webpack CLI to version “4.0.0” or “3.3.12”, but you can replace these numbers based on your investigation:

– Update the “Scripts” Object in “package.json”

Earlier versions of the Webpack development server used “webpack-dev-server” as a way to start the server. The Webpack team has updated this command in recent versions of Webpack, so the previous command will not work with newer versions.

What will work is “webpack serve” and if you have Webpack CLI v4 and Webpack v5, it’s what you should use to prevent the “cannot find module ‘webpack-cli/bin/config-yargs’” error. The following is a sample “package.json” that shows you how it’s done:

– Fix or Repair Your “package.json” and “node_modules” Folder

To fix the “module ‘webpack/bin/config-yargs’” error, you can fix your “package.json” file using the “npm” command on your command line or terminal.

You can use any of the following depending on your package manager:

Either of the commands above will create a new “package.json” file that you can customize to add your project dependencies. To fix your “node_modules” folder, ensure that you’ve fixed your “package.json” file as detailed above.

Now, open your terminal or command prompt and use any of the following:

Conclusion

This article explained why the Webpack development server could not find the Webpack CLI and how you can fix it. We’ll leave you with the following highlights from the article:

• If you don’t install Webpack CLI, you’ll get the cannot find “cannot find module ‘webpack-cli/bin/config-yargs’” error.
• A version mismatch between Webpack CLI and the development server can also prevent the server from finding the Webpack CLI.
• An old “package.json” with “webpack-dev-server” in the “scripts” object can also lead to the Webpack CLI error.
• To solve the “cannot find module ‘webpack-cli/bin/config-yargs’” error in Webpack v5 and Webpack CLI v4, use “webpack serve” in the “scripts” object of your “package.json”.
• Always use a compatible Webpack with the Webpack CLI to prevent any errors when you’re starting the development server.

No errors should exist in your terminal or command prompt about the Webpack CLI at this stage. You should follow the development of Webpack using their GitHub repository, and if you encounter an error in the future, our article is here for you.

Webpack is one of the most common packages that we use while working with JavaScript and node. However, sometimes we might encounter some common errors with webpack and one such error is “webpack: command not found” error.

In this article, we will see the cause of the error and discuss different solutions that can fix this particular error.

Why does the “webpack: command not found” error occurs?

The “webpack: command not found” error occurs when we try to run the webpack command but it cannot be found on our computer. This occurs due to several reasons however some of the common reasons are:

1. webpack is not installed locally/globally in our system.
2. problem with your node_module directory
3. corrupt installation of the npm webpack package

Next that we know the common causes of the error, let’s check the solution for this error below.

Solutions to the “webpack:command not found” error

Here are some of the solutions that we can try to resolve the error.

Solution 1: Run the build command using npx

One of the easy solutions to this “command not found ” error is to run the build command using npx.

According to the official document, this is the syntax to run the build command:

npx webpack build [option]

For example:

npx webpack build --config ./webpack.config.js --stats verbose

The webpack.config.js file contains all the input and output configurations of your files.

Note: While running webpack using npx please make sure you have webpack-cli installed.

To install webpack-cli in your project run the following command:

npm install --save-dev webpack-cli

 Solution 2: Install webpack locally

One of the fastest ways to solve this issue is to install webpack locally in your project directory. To install it open your terminal in the root directory of the project and run the following command:

npm install --save-dev webpack webpack-cli

This command will install webpack and webpack-cli locally in your project. The --save-dev option saves a package under the devDependencies in your package.json file.

To check if it is properly installed in your project, open package.json file and check if webpack and webpack-cli is under the devDependencies object.

{
  "devDependencies": {
    "webpack": "^5.76.2",
    "webpack-cli": "^5.0.1"
  }
}

Next, configure the webpack command in the script section of the package.json file. The json file should look like the following:

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }

  //..other  
 "devDependencies": {
    "webpack": "^5.76.2",
    "webpack-cli": "^5.0.1"
  }
}

Once done, you can use the command npm run build to use webpack in your project from your terminal.

Solution 3: Install webpack globally

If the error is still not solved by the above solution try to install webpack globally in your system. This will make webpack available in your terminal window.

To install it globally, use the following command:

npm install -g webpack webpack-cli

To make it install globally, make sure you use the -g option. The above command will install webpack and webpack-cli globally in your system.

Once installation is successful try to run the command again and it should solve the issue.

Note: According to webpack documentation it is not recommanded to install it globally as it will lock you down to a specific version of the webpack and it might fail in projects that uses different version of webpack.

Source: webpack documentation

Solution 4: Check if webpack-cli is installed in your system.

Sometimes when installing webpack you might forget to install the webpack-cli package in your project. And this might lead to the “webpack command not found” error when you try to use webpack from the terminal.

The webpack-cli is a command-line interface that provides developers with a set of commands to configure and run webpack from the terminal.

To install webpack-cli in your project directory use the following code:

npm install --save-dev webpack-cli

This command will install webpack-cli locally in your project directory as a devDependencies.

Once done try running your command from the terminal, it should resolve the error.

Solution 5: Reinstall webpack locally

Due to poor internet connections sometimes the installation of a package freezes and thus the npm package is not installed properly in the project.

And the “webpack command not found” error might occur due to such a corrupt installation too.

So to fix the error, uninstall the package first using the following command:

npm uninstall webpack

This will uninstall the package from the project.

Next, just reinstall the package locally using the following command:

npm i -D webpack

Once installation is done, restart your terminal and then run your build command again. It should solve the issue.

Solution 6: Reinstall node_module in your project.

If the above solutions did not work for you then try to delete your node_module folder and then reinstall all the packages on your project.

Sometimes while installing lots of npm packages in your project some might create conflict issues and so you might get the “webpack command not found” error.

So to delete the node_module from your project do the following:

Step 1: Delete your node_module folder by running the following command:

#linux /macOS
rm -rf node_modules

#for windows
rd /s /q "node_modules"

Step 2: Next, delete your package-lock.json file and both the dist and build folders if they already exist in your project directory.

rm -f package-lock.json

#delete dist and build folder (if exist)
rm -rf dist
rm -rf build

#windows
del package-lock.json

Note: Make sure you only delete the package-lock.json file and not the package.json file.

Step 3: Next, run the npm install command in your terminal and it will reinstall all the npm packages that are in your package.json files

Once package installation is complete, go to your package.json file and check if it contains webpack and webpack-cli in the devDependencies and the build command in your script section is properly configured.

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }

  //..other  
 "devDependencies": {
    "webpack": "^5.76.2",
    "webpack-cli": "^5.0.1"
  }
}

If everything is configured properly, then you can run the build command again and it should resolve the error.

Conclusion:

In this article, we have found out the reasons for the “webpack command not found” error and discussed some of the common solutions we can try to resolve this npm error. You can follow the solutions provided in this article to solve the error and continue your project.