webpack-cli failed to load webpack.config.js and couldn't find the html-webpack-plugin

Question

I'm trying to migrate my webpack from the v4 version to the v5 everything went ok except when I typed npm run start' for the live server I got a problem with the [Webpack-cli] saying:

[webpack-cli] Failed to load 'C:\Users\user\Desktop\Test_0.3\starter\webpack.config.js' config
[webpack-cli] { Error: Cannot find module 'html-webpack-plugin'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (C:\Users\user\Desktop\Test_0.3\starter\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (C:\Users\user\Desktop\Test_0.3\starter\webpack.config.js:2:25)
    at Module._compile (C:\Users\user\Desktop\Test_0.3\starter\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }

here is my package.json folder:

    {
  "name": "starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "live-server": "^1.2.1"
  },
  "devDependencies": {
    "html-webpack-plugin": "^5.1.0",
    "webpack": "^5.22.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack serve --mode development --open"
  },
  "author": "",
  "license": "ISC"
}

the webpack.config.js

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

module.exports={
    entry: './src/js/index.js',
    output:{
        path:path.resolve(__dirname, 'dist'),
        filename:'js/bundle.js'
    },
    devServer:{
        contentBase: './dist'
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./src/index.html'
        })
    ]
}

also I have another problem which is webpack-cli couldn't find the html-webpack-plugin even though it's installed as you see

thanks for your help in advance

I appreciate it

Answer 1

Have you tried updating your node version to version <13? It should help!