How to disable resolving of empty srcset attribute

[hqw567]

Description: When using an empty srcset attribute in an image tag, such as , the HtmlBundlerPlugin fails to resolve the file and throws a LoaderException. The error message reads: "html-bundler-webpack-plugin The file '' can't be resolved in the template src\views\pages\home\index.html".

Expected behavior: The HtmlBundlerPlugin should be able to handle empty srcset attributes and not throw an error.

Steps to reproduce:

• Add an image tag with an empty srcset attribute to an HTML file.
• Run the HtmlBundlerPlugin.
• Check the console for errors.
  Possible solution: The HtmlBundlerPlugin could be updated to handle empty srcset attributes and not throw an error.

[webdiscus]

Hello @hqw567,

thanks for the question.

I can't think of a use case with empty srcset attribute.
Yes, defaults behaviour throws an exception, this is right. An empty srcset attribute means you forgot to define the source file, otherwise what's the reason of having an empty attribute?

If you need to disable the srcset attribute or ignore an empty value, use the loader option sources:

Disable the processing of an attribute

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        index: 'src/views/index.html',
      },
      loaderOptions: {
        sources: [
          // disable the processing of attribute srcset of the img tag
          {
            tag: 'img',
            filter: ({ attribute }) => attribute !== 'srcset',
          }
        ],
      },
    }),
  ],
};

Ignore the processing of an empty attribute

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        index: 'src/views/index.html',
      },
      loaderOptions: {
        sources: [
          //  ignore the processing of an empty srcset attribute of the img tag
          {
            tag: 'img',
            filter: ({ attribute, value }) => attribute === 'srcset' && value !== '',
          }
        ],
      },
    }),
  ],
};

For debugging, you can disable an attribute adding any prefix to attribute name, e.g.:

Defaults, the standard attributes will be parsed:

<img src="./image.png" srcset="">

Ignore non standard attributes:

<img x-src="./image.png" x-srcset="">

[hqw567]

Thank you very much for your help!