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

Question

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"]
}

What I would suggest is , better delete your complete node modules and then try npm install — simbathesailor, Jul 26 '18 at 02:31
Can you run npm cache clean -f. And check it. It will basically clears the package cache — simbathesailor, Jul 26 '18 at 02:39
UPDATE: I noticed that I cannot see the version for "html-webpack-plugin". It displays as it is not installed. However, I have installed it, and it is loaded in "package.json" folder. — user8449046, Jul 26 '18 at 02:42
I found that there isn't any folder based on "html-webpack-plugin" — user8449046, Jul 26 '18 at 02:48
Yeah, so your package is not getting installed . Please check the log on terminal. If there are any permission issue. Most of the time it's the case. Try install html-webpack-plugin seperately. npm install html-webpack-plugin --save-dev. If not happening try with sudo or with administrative priviledge if you are on windows — simbathesailor, Jul 26 '18 at 02:50
rm -rf node_modules npm install npm i html-webpack-plugin --save-dev Try this way. — Krina Soni, Jul 26 '18 at 05:41

score 17 · Answer 1 · edited Mar 22 '19 at 23:26

17

Use this command:

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

edited Mar 22 '19 at 23:26

Pavel Smirnov

4,611
3
18
28

answered Mar 22 '19 at 21:55

Orsos Patrick

389
3
5

1

I have `html-webpack-plugin` in package.json like OP, but webpack isn't detecting it. I also deleted my node modules and tried the whole thing again. Still nothing. Is there any way to get more info on where webpack is looking? – 425nesp Apr 07 '20 at 10:42

score 3 · Answer 2 · answered Sep 04 '20 at 15:19

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.

score 0 · Answer 3 · answered Nov 08 '21 at 12:41

0

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.

answered Nov 08 '21 at 12:41

score 0 · Answer 4 · answered Apr 18 '22 at 05:27

0

I tried a replacement version to fix the problem

npm install html-webpack-plugin@4.5.0

answered Apr 18 '22 at 05:27

SmileHalo

9
3

score 0 · Answer 5 · edited May 15 '23 at 20:05

0

In my case I fixed a problem by renaming

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

to

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

edited May 15 '23 at 20:05

NoCommandLine

5,044
2
4
15

answered Mar 31 '23 at 15:51

Ivan Stashko

1
4

score -2 · Answer 6 · answered Apr 25 '20 at 17:26

-2

You can also resolve error by using below command.

npm install html-webpack-plugin

answered Apr 25 '20 at 17:26

Shakeer Hussain

2,230
7
29
52

2

This does not add to the existing answer. In fact, it is worse than the existing answer since you're installing it as a dependency instead of a dev dependency. – d4nyll Aug 13 '20 at 16:33

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

6 Answers6