webpack: command not found error – Fixed

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.

Related Article: