React项目编译报错：Cannot read properties of undefined (reading 'tap')

这个报错的核心原因是HtmlWebpackPlugin与Webpack版本不兼容。HtmlWebpackPlugin的apply方法会调用Webpack的钩子API（比如compiler.hooks.compilation.tap），若两者版本不匹配，就会因找不到对应钩子方法抛出Cannot read properties of undefined (reading 'tap')错误。

修复步骤： #

• 查看当前依赖版本
  执行命令确认已安装的Webpack和HtmlWebpackPlugin版本：

  npm list webpack html-webpack-plugin
  

• 匹配兼容版本组合

  • 若Webpack为v4.x，需安装v4.x版本的HtmlWebpackPlugin（如html-webpack-plugin@4.5.2）
  • 若Webpack为v5.x，需安装v5.x及以上版本的HtmlWebpackPlugin（如html-webpack-plugin@5.5.3）

• 重新安装适配依赖
  先卸载现有版本，再安装对应版本：

  # Webpack v4 适配命令
  npm uninstall html-webpack-plugin
  npm install html-webpack-plugin@4 --save-dev
  
  # Webpack v5 适配命令
  npm uninstall html-webpack-plugin
  npm install html-webpack-plugin@5 --save-dev
  

• 清理缓存并重新编译
  删除依赖目录和锁文件，重新安装所有依赖后执行编译：

  rm -rf node_modules package-lock.json
  npm install
  npm run dev
  

内容的提问来源于stack exchange，提问作者José Carlos