找不到模块：错误：无法解析“HtmlWebpackPlugin”

Question

I have a problem using the html-webpack-plugin . I am learning React, and I need to use html-webpack-plugin, but when I run it in developer mode, I have this error:

Error: Child compilation failed:
  Module not found: Error: Can't resolve 'HtmlWebpackPlugin' in '/home/paolo/develop/react-shop'
  ModuleNotFoundError: Module not found: Error: Can't resolve 'HtmlWebpackPlugin' in '/home/paolo/develop/  react-shop'
      at /home/paolo/develop/react-shop/node_modules/webpack/lib/Compilation.js:2016:28
      at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:798:13
      at eval (eval at create (/home/paolo/develop/react-shop/node_modules/tapable/lib/HookCodeFactory.js:  33:10), :10:1)
      at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:270:22
      at eval (eval at create (/home/paolo/develop/react-shop/node_modules/tapable/lib/HookCodeFactory.js:  33:10), :9:1)
      at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:541:15
      at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:116:11
      at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:612:8
      at /home/paolo/develop/react-shop/node_modules/neo-async/async.js:2830:7
      at done (/home/paolo/develop/react-shop/node_modules/neo-async/async.js:2925:13)
  
  - Compilation.js:2016 
    [react-shop]/[webpack]/lib/Compilation.js:2016:28
  
  - NormalModuleFactory.js:798 
    [react-shop]/[webpack]/lib/NormalModuleFactory.js:798:13
  
  
  - NormalModuleFactory.js:270 
    [react-shop]/[webpack]/lib/NormalModuleFactory.js:270:22
  
  
  - NormalModuleFactory.js:541 
    [react-shop]/[webpack]/lib/NormalModuleFactory.js:541:15
  
  - NormalModuleFactory.js:116 
    [react-shop]/[webpack]/lib/NormalModuleFactory.js:116:11
  
  - NormalModuleFactory.js:612 
    [react-shop]/[webpack]/lib/NormalModuleFactory.js:612:8
  
  - async.js:2830 
    [react-shop]/[neo-async]/async.js:2830:7
  
  - async.js:2925 done
    [react-shop]/[neo-async]/async.js:2925:13
  
  - child-compiler.js:169 
    [react-shop]/[html-webpack-plugin]/lib/child-compiler.js:169:18
  
  - Compiler.js:551 finalCallback
    [react-shop]/[webpack]/lib/Compiler.js:551:5
  
  - Compiler.js:577 
    [react-shop]/[webpack]/lib/Compiler.js:577:11
  
  - Compiler.js:1196 
    [react-shop]/[webpack]/lib/Compiler.js:1196:17
  
  
  - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
    [react-shop]/[tapable]/lib/Hook.js:18:14
  
  - Compiler.js:1192 
    [react-shop]/[webpack]/lib/Compiler.js:1192:33
  
  - Compilation.js:2787 finalCallback
    [react-shop]/[webpack]/lib/Compilation.js:2787:11
  
  - Compilation.js:3092 
    [react-shop]/[webpack]/lib/Compilation.js:3092:11*
`

I have already installed the plugin. This is my webpack config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'development',
    resolve: {
        extensions: [ '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'HtmlWebpackPlugin',
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: './index.html'
        })
    ]
}

This is my package.

{
  "name": "react-shop",
  "version": "1.0.0",
  "description": "react eshop",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open",
    "build": "webpack --mode production"
  },
  "keywords": [
    "react",
    "javascript"
  ],
  "author": "Josue Quichca <josuelml28@hotmail.com>",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.0",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.0",
    "webpack-dev-server": "^4.11.1"
  }
}

I am learning. Please help!

Answer 1

Try this:

1. Remove html-webpack-plugin from your package.json
2. rm -rf node_modules
3. npm cache clean -f
4. npm i html-webpack-plugin --save-dev