'Error: Cannot find module 'html-webpack-plugin' - Webpack (React)

I tried to create a basic React app with webpack 4 following this link

until installing "html-webpack-plugin", I did not face any errors. But, once I run the command "npm run start", I keep getting the following error:

**Error: Cannot find module 'html-webpack-plugin'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)**

I tried to solve this issue using the following two threads by installing packages globally and locally, but it didn't help.

error: cannot find module html-webpack-plugin

https://github.com/webpack/webpack-dev-server/issues/1330

Please see my code below:

package.json:

{
  "name": "react_website",
  "version": "1.0.0",
  "description": "Website using React and Webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.2",
    "webpack-cli": "^2.1.5"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }
}

webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
  })
],
};

- .babelrc:

{
  "presets": ["env", "react"]
}


Solution 1:[1]

Use this command:

npm i --save-dev html-webpack-plugin

Solution 2:[2]

Try removing Node Modules: rm -rf node_modules.

Next re-install all dev dependencies npm install.

Lastly, re-install the html-webpack-plugin npm i html-webpack-plugin --save-dev.

I would also suggest making sure all of the directory paths are correct and that you're inside the actual project folder. This is rare, but can happen from time to time.

Solution 3:[3]

I tried a replacement version to fix the problem

npm install [email protected]

Solution 4:[4]

In my case, using typescript, sublime didn't pick it up. Don't even need to install @types/html-webpack-plugin, it already exists. Just needed to restart the IDE for it to register.

Solution 5:[5]

You can also resolve error by using below command.

npm install html-webpack-plugin

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pavel Smirnov
Solution 2 Stephen Romero
Solution 3 SmileHalo
Solution 4 Matriarx
Solution 5 Shakeer Hussain