<h1 dir="auto">Bug report</h1>
<p dir="auto">Since v5.22, build are failing with this error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ERROR in   Error: The loader &quot;/Users/my-user/project/node_modules/html-webpack-plugin/lib/loader.js!//Users/my-user/project/src/app/index.html&quot; didn't return html.

  - index.js:336 HtmlWebpackPlugin.evaluateCompilationResult
    [ni-xbox2]/[html-webpack-plugin]/index.js:336:24

  - index.js:243 Promise.resolve.then
    [ni-xbox2]/[html-webpack-plugin]/index.js:243:22

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7



webpack 5.22.0 compiled with 1 error and 1 warning in 73981 ms
ℹ ｢wdm｣: Failed to compile."><pre class="notranslate"><code class="notranslate">ERROR in   Error: The loader "/Users/my-user/project/node_modules/html-webpack-plugin/lib/loader.js!//Users/my-user/project/src/app/index.html" didn't return html.

  - index.js:336 HtmlWebpackPlugin.evaluateCompilationResult
    [ni-xbox2]/[html-webpack-plugin]/index.js:336:24

  - index.js:243 Promise.resolve.then
    [ni-xbox2]/[html-webpack-plugin]/index.js:243:22

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7



webpack 5.22.0 compiled with 1 error and 1 warning in 73981 ms
ℹ ｢wdm｣: Failed to compile.
</code></pre></div>




<p dir="auto"><strong>What is the current behavior?</strong><br>
The build are failing, saying that the html file did not return an HTML output.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
Upgrade webpack from v5.21 to v5.22, reinstall node_modules and webpack will fail to build the project.</p>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
Webpack should build the project.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  v5.22<br>
Node.js version: v15.8.0<br>
Operating System: MacOs Catalina v10.15.7<br>
Additional tools:</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">bug</p>


<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">With babel 7 this doesn't work:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const file = 'test.js'
require(`./${file}`)"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">file</span> <span class="pl-c1">=</span> <span class="pl-s">'test.js'</span>
<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">`./<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">file</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">I think it's because babel 7 transpiles template literals to use <code class="notranslate">concat</code> which webpack doesn't understand:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const file = 'test.js'
require('./'.concat(file))"><pre class="notranslate"><code class="notranslate">const file = 'test.js'
require('./'.concat(file))
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto"><a href="https://github.com/laggingreflex/webpack-3-require-test">https://github.com/laggingreflex/webpack-3-require-test</a></p>



<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto"><strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong></p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong></p>