How To Fix The Error “Cannot Find Module ‘Webpack'” In JavaScript?

How To Fix The Error: Cannot Find Module ‘Webpack’ In JavaScript?

To fix the error “cannot find module ‘webpack'”, you should have a basic knowledge of NPM. So before we get into the main section, let’s learn more about NPMM and webpack.

What is NPM, and what is webpack?

NPM was born with Nodejs. It is a package management tool in JavaScript. It helps us to install and update the necessary packages for the project quickly.

Webpack is a module bundler – that helps us to pack resource files into organized files. Webpack’s advantages include: bundling JS and CSS files into a single file, minifying assets, optimizing the image, svg…

When does the “cannot find module ‘webpack'” error occur?

To use the webpack library, make sure you install it from npm. You will get an error message “Cannot find module ‘webpack'” if you try to use webpack before installation.

Another reason is that you have installed webpack globally but don’t link it to the project folder.

In the example below, there is no webpack package in the package.json file, but in the index.js file, we try to access webpack, and so we get the error “cannot find module ‘webpack'”.

Package.json:

{
	// ...
	"dependencies": {
		"date-fns": "^2.29.3",
		"express": "^4.18.2",
		"nodemon": "^2.0.20"
	}
}

Index.js:

// Require webpack but not installed
const webpack = require("webpack");

// Try to access webpack
console.log(webpack.version);

Output:

Error: Cannot find module 'webpack'

How to fix this problem?

Install webpack and webpack-cli before using them

To fix this problem, you must install webpack and webpack-CLI before using them by opening a terminal in the project directory and typing the following command:

npm install webpack webpack-cli --save-dev

The –save-dev suffix will save our packages to devDependencies instead of dependencies.

Next, check the package.json file:

{
	// ...
	"dependencies": {
		"date-fns": "^2.29.3",
		"express": "^4.18.2",
		"nodemon": "^2.0.20"
	},
    
	"devDependencies": {
		"webpack": "^5.74.0",
		"webpack-cli": "^4.10.0"
	}
}

If you see the webpack and webpack-cli packages in the devDependencies, it proves you have successfully installed them. Now you can use webpack comfortably.

Let’s try the first example again, but this time we have installed webpack.

Index.js:

// Require webpack
const webpack = require("webpack");

// Access the version to check if we can use webpack
console.log(webpack.version);

Output:

5.74.0

Link webpack to project folder

If you have installed webpack in a global environment using the command line:

npm install --global webpack

But when using webpack in the project directory, you still get the error message: cannot find module ‘webpack’. Maybe you have not linked webpack to the project directory.

Open a terminal in the project directory and type the following command:

npm link webpack

Next, check the node_modules folder. You will see on the right of the webpack folder there is an arrow symbol like the image below. It proves you have successfully linked.

Now you can use webpack anywhere in your project directory.

Clear cache if webpack and webpack-cli are installed

If in the node_modules folder and your package.json file, the webpack and webpack-cli packages already exist, but you still get the error “cannot find module ‘webpack'”. Just clear the npm cache.

First, delete the node_modules folder and the package-lock.js file. Then run the following commands:

npm cache clean --force
npm install

Once installed, the node_modules folder and the package_lock.json file will reappear. Like this:

Now, check the node_modules folder. If you see two folders: webpack and webpack-cli, you have installed them successfully.

From now on, you can use webpack and never worry about the “cannot find module ‘webpack'” error again.

Summary

We have fixed the error “cannot find module ‘webpack'” together. We hope in the future if you encounter the same error, you can solve it easily by yourself.

Thanks for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *