Error in child compilation, module error, parse error. html-loader and srcset attribute

html-loader fails when I'm trying to build my production files.

This errors only show when I'm trying to build files and there are srcset attributes on <img> and <source> elements in HTML files. <img> elements with src attribute are build without errors.

-2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) -Parse error -Module error

Error message is very long, here is beginning of error message: Here is ending of error message:

My loaders and plugins configuration in webpack.common.js file. On this configuration, I have the above error message showing. I was trying different configurations and options but result was the same.

module.exports = {
entry: "./src/index.js",
//devtool: "none",
module: {
    rules: [
        {
            test: /\.scss$/,
            use: ["style-loader", "css-loader", "sass-loader"]
        }
        , {
            test: /\.html$/i,
            use: {
                loader: "html-loader",
                options: {                        
                    sources: {
                        list: [
                            // All default supported tags and attributes
                            "...",
                            {
                                tag: "img",
                                attribute: "src",
                                type: "src",
                            },
                            {
                                tag: "img",
                                attribute: "srcset",
                                type: "srcset",
                            },
                            {
                                tag: "source",
                                attribute: "srcset",
                                type: "srcset",
                            },
                        ],
                        urlFilter: (attribute, value, resourcePath) => {
                            // The `attribute` argument contains a name of the HTML attribute.
                            // The `value` argument contains a value of the HTML attribute.
                            // The `resourcePath` argument contains a path to the loaded HTML file.

                            if (/example\.pdf$/.test(value)) {
                                return false;
                            }

                            return true;
                        },
                    }
                }
            }
        },         
        {
            test: /\.(png|jpe?g|gif|svg)$/i,
            type: 'asset/resource'
        }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
        template: "./src/template.html"
    }),
    new HtmlWebpackPlugin({
        filename: "about.html",
        template: "./src/about.html"
    }),
    new HtmlWebpackPlugin({
        filename: "skills.html",
        template: "./src/skills.html"
    }),
    new HtmlWebpackPlugin({
        filename: "work.html",
        template: "./src/work.html"
    }),
    new HtmlWebpackPlugin({
        filename: "contact.html",
        template: "./src/contact.html"
    })
],}

Here is my webpack.prod.js

module.exports = merge(common, {
mode: "production",
output: {
    filename: "main.[contenthash].js",
    path: path.resolve(__dirname, "dist"),
    assetModuleFilename: "assets/imges/[name].[hash][ext]"
}});

Example of my HTML code with responsive images:

<picture>
            <source media="(max-width: 767px)" sizes="(max-width: 767px) 100vw, 767px" 
            srcset="assets/images/workplace/workplace-11-480.jpg 480w,
                    assets/images/workplace/workplace-11-767.jpg 767w">
            <source media="(min-width: 768px) and (max-width: 991px)" sizes="(max-width: 991px) 70vw, 694px" 
            srcset="assets/images/workplace/workplace-43-538.jpg 538w,
                    assets/images/workplace/workplace-43-694.jpg 694w">
            <source media="(min-width: 992px) and (max-width: 1199px)" sizes="(max-width: 1200px) 60vw, 720px"
            srcset="assets/images/workplace/workplace-169-596.jpg 596w,
                    assets/images/workplace/workplace-169-720.jpg 720w">
            <img sizes="(max-width: 6183px) 40vw, 2473px" 
            srcset="assets/images/workplace/workplace-480.jpg 480w,
                    assets/images/workplace/workplace-922.jpg 922w,
                    assets/images/workplace/workplace-1160.jpg 1160w,
                    assets/images/workplace/workplace-1350.jpg 1350w,
                    assets/images/workplace/workplace-1528.jpg 1528w,
                    assets/images/workplace/workplace-1672.jpg 1672w,
                    assets/images/workplace/workplace-1762.jpg 1762w,
                    assets/images/workplace/workplace-1818.jpg 1818w,
                    assets/images/workplace/workplace-1950.jpg 1950w,
                    assets/images/workplace/workplace-2164.jpg 2164w,
                    assets/images/workplace/workplace-2473.jpg 2473w"
                src="assets/images/workplace/workplace-2473.jpg" alt="">
        </picture>

I was able to build my production files with html-loader-srcset but I still get the same error message when I try extend default sources with href of a element.

My goal is to make sure that when image files are copied into my dist production directory by webpack, paths in src and srcset attributes and href attr change according to a new image file path.

This is working on elements <img> and <source> with srcset attr

{
            test: /\.html$/i,
            use: {
                loader: "html-loader",
                options: {
                    attrs: [':src', ':srcset']
                }
            }
        },
 

This is not working:

 , {
            test: /\.html$/i,
            use: {
                loader: "html-loader-srcset",
                options: {
                    attrs: [':src', ':srcset', 'a:href']
                }
            }
        },