HTML Webpack plugin: ERROR in Error: require(...).pathToFileURL is not a function

While going through this course: https://www.udemy.com/course/git-a-web-developer-job-mastering-the-modern-workflow , I have already stumbled over a few outdated points. The author does admit that and has made updates. Sadly, clips and resources are not all updated, which ended up in me getting an error that halted my progress. I am currently at section 19: Building and Deploying.

When I try to build the HTML file with the command npm dev build, I get the following output:

> [email protected] build /Users/support/Desktop/Projects/Travel-site
> webpack

assets by status 29.8 KiB [cached] 4 assets
Entrypoint main = styles.04959366028662e1b1ad.css main.04959366028662e1b1ad.js
runtime modules 7.17 KiB 12 modules
orphan modules 3.94 KiB [orphan] 4 modules
javascript modules 43 KiB
  modules by path ./node_modules/lodash/*.js 16.5 KiB
    ./node_modules/lodash/throttle.js 2.65 KiB [built] [code generated]
    ./node_modules/lodash/debounce.js 5.96 KiB [built] [code generated]
    ./node_modules/lodash/isObject.js 733 bytes [built] [code generated]
    ./node_modules/lodash/now.js 520 bytes [built] [code generated]
    ./node_modules/lodash/toNumber.js 1.48 KiB [built] [code generated]
    + 10 modules
  modules by path ./app/assets/scripts/ 6.96 KiB
    ./app/assets/scripts/App.js + 3 modules 4.92 KiB [built] [code generated]
    ./app/assets/scripts/modules/Modal.js 2.04 KiB [built] [code generated]
  ./node_modules/lazysizes/lazysizes.js 19.5 KiB [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js?url=false!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./app/assets/styles/styles.css 18.5 KiB [built] [code generated]

ERROR in   Error: require(...).pathToFileURL is not a function
  
  - index.html:66 
    /Users/support/Desktop/Projects/Travel-site/app/index.html:66:51
  
  - index.html:85 
    /Users/support/Desktop/Projects/Travel-site/app/index.html:85:13
  
  - index.html:96 
    /Users/support/Desktop/Projects/Travel-site/app/index.html:96:12
  
  - index.js:142 HtmlWebpackPlugin.evaluateCompilationResult
    [Travel-site]/[html-webpack-plugin]/index.js:142:28
  
  - index.js:324 Promise.resolve.then
    [Travel-site]/[html-webpack-plugin]/index.js:324:26
  
  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7
  


webpack 5.75.0 compiled with 1 error in 5345 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/support/.npm/_logs/2023-03-13T09_22_15_909Z-debug.log

Needless to say, this creates no new files. I can make my code to not cause any errors, but that also does not generate any .html file.

Here is the JavaScript code:

const currentTask = process.env.npm_lifecycle_event;
const path = require("path");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const postCSSPlugins = [
    require("postcss-import"),
    require("postcss-mixins"),
    require("postcss-simple-vars"),
    require("postcss-nested"),
    require("postcss-hexrgba"),
    require("autoprefixer")];

let cssConfig = {
                test: /\.css$/i, 
                use: ["css-loader?url=false",{
                    loader: "postcss-loader", 
                    options: {
                        postcssOptions: {
                            plugins: postCSSPlugins
                        }
                    }
                }]
            }

let config =
{
    entry: "./app/assets/scripts/App.js",
    plugins: [new HtmlWebpackPlugin({
        filename: "index.html",
        template: "./app/index.html"})],
    module: {
        rules: [ cssConfig ]
    }
}

if (currentTask == "dev")
{
    cssConfig.use.unshift("style-loader");

    config.output =
    {
        filename: "bundled.js",
        path: path.resolve(__dirname, "app")
    }

    config.devServer =
    {
        before: function(app, server)
        {
            server._watch("./app/**/*.html");
        },
        contentBase: path.join(__dirname, "app"),
        hot: true,
        port: 3000,
        host: "0.0.0.0"
    }

    config.mode = "development";
}

if (currentTask == "build")
{
    cssConfig.use.unshift(MiniCssExtractPlugin.loader);

    config.output =
    {
        filename: "[name].[chunkhash].js",
        chunkFilename: "[name].[chunkhash].js",
        path: path.resolve(__dirname, "dist")
    }

    config.mode = "production";
    config.optimization =
    {
        splitChunks: {chunks: "all"},
        minimize: true,
        minimizer: [`...`, new CssMinimizerPlugin()]
    }

    config.plugins.push(
      new CleanWebpackPlugin(),
      new MiniCssExtractPlugin({filename: 'styles.[chunkhash].css'}) 
    )
}

module.exports = config;

I do not know if I have made some typo somewhere, or if I have missed something, or if the course that is not properly updated.

While still trying to diagnose the problem, it seem like there is something wrong with the line template: "./app/index.html" in here:

let config =
    {
        entry: "./app/assets/scripts/App.js",
        plugins: [new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./app/index.html"})],
        module: {
            rules: [ cssConfig ]
        }
    }