TypeError: Cannot read properties of undefined (reading 'tap')

Question

I am trying to run this react boilerplate using npm start and I get this error everytime:

/mnt/c/Users/User/Downloads/LI-AI-PAD/LI-AI-PAD/node_modules/html-webpack-plugin/index.js:43
    compiler.hooks.initialize.tap('HtmlWebpackPlugin', () => {
                              ^

TypeError: Cannot read properties of undefined (reading 'tap')
    at HtmlWebpackPlugin.apply (/mnt/c/Users/User/Downloads/LI-AI-PAD/LI-AI-PAD/node_modules/html-webpack-plugin/index.js:43:31)
    at webpack (/mnt/c/Users/User/Downloads/LI-AI-PAD/LI-AI-PAD/node_modules/webpack/lib/webpack.js:51:13)
    at addDevMiddlewares (/mnt/c/Users/User/Downloads/LI-AI-PAD/LI-AI-PAD/server/middlewares/addDevMiddlewares.js:16:20)   
    at module.exports (/mnt/c/Users/User/Downloads/LI-AI-PAD/LI-AI-PAD/server/middlewares/frontendMiddleware.js:15:5)      
    at Object.<anonymous> (/mnt/c/Users/User/Downloads/LI-AI-PAD/LI-AI-PAD/server/index.js:21:1)
    at Module._compile (node:internal/modules/cjs/loader:1120:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)

Node.js v18.7.0

I tried adding @params to the file that is causing the problem but I still get the same problem. I also tried to install different webpack versions but it says that there are conflicting peer dependencies. This problem is rooted in the node-modules so I am not entirely sure of how to tackle this. I have to use this boilerplate and can't switch it for another.

How do I fix this?

/**
 * @param {{ hooks: { initialize: { tap: (arg0: string, arg1: () => void) => void; }; }; options: { entry: {}; }; }} compiler
 */
apply (compiler) {
  // Wait for configuration preset plugions to apply all configure webpack defaults
  compiler.hooks.initialize.tap('HtmlWebpackPlugin', () => {
    const userOptions = this.userOptions;

    // Default options
    /** @type {ProcessedHtmlWebpackOptions} */
    const defaultOptions = {
      ...
    };
    ...
}

package.json:

"devDependencies": {
  "webpack": "^4.46.0",
  "webpack-cli": "^3.3.12",
  "webpack-dev-middleware": "3.6.2",
  "webpack-hot-middleware": "^2.25.3",
  "webpack-pwa-manifest": "^4.3.0",
}