title: Webpack 5 Html Webpack Plugin error "Error: Child compilation failed:"
body: <p>After adding html-loader with file-loader to my Webpack configuration file I get an error bundling everything together.</p>
  <p>I have an img tag in the template.html file.</p>
   
  <p>It keep saying  <em>&quot;Bad value for attribute &quot;src&quot; on element &quot;img&quot;: Must   be non-empty&quot;</em> but as you can see I do have value in the src attribute.</p>
  <p><strong>Error</strong></p>
  <p>Html Webpack Plugin:</p>
  <pre><code>  Error: Child compilation failed:
    Module Error (from ./node_modules/html-loader/dist/cjs.js):
    HtmlSourceError: Bad value for attribute &quot;src&quot; on element &quot;img&quot;: Must   be non-empty (From line 78, column 17; to line 78, column 89)
    ModuleError: Module Error (from ./node_modules/html-loader/dist/cjs.js  ):
    HtmlSourceError: Bad value for attribute &quot;src&quot; on element &quot;img&quot;: Must   be non-empty (From line 78, column 17; to line 78, column 89)
    
    - NormalModule.js:433 Object.emitError
      [PlaceFinder]/[webpack]/lib/NormalModule.js:433:6
    
    - index.js:61 Object.loader
      [PlaceFinder]/[html-loader]/dist/index.js:61:10
    
    - LoaderRunner.js:132 LOADER_EXECUTION
      [PlaceFinder]/[loader-runner]/lib/LoaderRunner.js:132:14
    
    - LoaderRunner.js:133 runSyncOrAsync
      [PlaceFinder]/[loader-runner]/lib/LoaderRunner.js:133:4
    
    - LoaderRunner.js:251 iterateNormalLoaders
      [PlaceFinder]/[loader-runner]/lib/LoaderRunner.js:251:2
    
    - LoaderRunner.js:224 Array.
      [PlaceFinder]/[loader-runner]/lib/LoaderRunner.js:224:4
    
    - CachedInputFileSystem.js:25 runCallbacks
      [PlaceFinder]/[enhanced-resolve]/lib/CachedInputFileSystem.js:25:15
    
    - CachedInputFileSystem.js:198 
      [PlaceFinder]/[enhanced-resolve]/lib/CachedInputFileSystem.js:198:4
    
    - graceful-fs.js:123 
      [PlaceFinder]/[graceful-fs]/graceful-fs.js:123:16
    
    - read_file_context.js:63 FSReqCallback.readFileAfterClose [as oncompl    ete]
      internal/fs/read_file_context.js:63:3
    
    - child-compiler.js:159 
      [PlaceFinder]/[html-webpack-plugin]/lib/child-compiler.js:159:18
    
    - Compiler.js:511 
      [PlaceFinder]/[webpack]/lib/Compiler.js:511:11
    
    - Compiler.js:1059 
      [PlaceFinder]/[webpack]/lib/Compiler.js:1059:17
    
    
    - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
      [PlaceFinder]/[tapable]/lib/Hook.js:18:14
    
    - Compiler.js:1055 
      [PlaceFinder]/[webpack]/lib/Compiler.js:1055:33
    
    - Compilation.js:2119 
      [PlaceFinder]/[webpack]/lib/Compilation.js:2119:10
    
    
    - Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
      [PlaceFinder]/[tapable]/lib/Hook.js:18:14
    
    - Compilation.js:2112 
      [PlaceFinder]/[webpack]/lib/Compilation.js:2112:37
  </code></pre>
  <p><strong>My configuration file</strong></p>
  <pre><code>var HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const path = require(&quot;path&quot;);
  module.exports = {
    entry: &quot;./src/index.js&quot;,
    plugins: [new CleanWebpackPlugin(), new HtmlWebpackPlugin({
      template: &quot;./src/template.html&quot;,
      minify: false,
    })],
    module: {
      rules: [
        {
          test: /\.s?css$/i,
          use: [
            &quot;style-loader&quot;, // Inject styles into DOM
            &quot;css-loader&quot;, // Turns css into commonJS
            &quot;sass-loader&quot; // Turns sass into css
          ],
        },
        {
          test: /\.html$/i,
          use: [&quot;html-loader&quot;],
        },
        {
          test: /\.(svg|png|jpe?g|gif)$/i,
          loader: 'file-loader',
          options: {
            name: &quot;[name].[ext]&quot;,
            outputhPath: &quot;imgs&quot;
          }
        }
      ]
    }
  };
  </code></pre>
  <p>I can't find a way at the moment to solve this problem. Maybe someone here can help.</p>