<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Two entries and common chunk (see the linked repo for more details):</p>
<ul dir="auto">
<li>index1 - imports dep1 which imports dep2. actually uses both of them</li>
<li>index2 - imports dep1 but only uses a function that does not depend on dep2</li>
<li>commons - contains everything that is used by more than one entry</li>
</ul>
<p dir="auto">The issue is that dep2 is detected only as required only for index1 (since index2 does not actually use it). By itself that is kind of fine - when loading commons+index1, everything works, because dep2 is loaded from index1 chunk.</p>
<p dir="auto">However when loading index2, fails with runtime error due to the fact that in commons chunk, dep1 still lists dep2 as dependency - but it is not included in either commons or index2.</p>
<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/Knagis/webpack-concat-issue/tree/commons-error">https://github.com/Knagis/webpack-concat-issue/tree/commons-error</a></p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">no runtime errors (either dep2 is included in commons chunk or it is loaded only when calling the function that uses it or various other combinations of moving/splitting the modules so that it works for both entries)</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.1.3<br>
Node.js version: 12.13.1<br>
Operating System: Win10<br>
Additional tools:</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong><br>
when the first request, only add one(the very last one import css/less file) to the html, cause the page style error</p>

<p dir="auto"><strong>example</strong><br>
index.jsx(entry):<br>
import 'styles/my.less';<br>
import 'styles/index.less';</p>

<p dir="auto"><strong>expected html</strong></p>

  &lt;style&gt;{my.less content}&lt;/style&gt;
  &lt;style&gt;{index.less content}&lt;/style&gt;


<p dir="auto"><strong>first request result html</strong></p>

  &lt;style&gt;{index.less content}&lt;/style&gt;


<p dir="auto"><strong>second or more request result html</strong></p>

  &lt;style&gt;{my.less content}&lt;/style&gt;
  &lt;style&gt;{index.less content}&lt;/style&gt;


<p dir="auto"><strong>bug reason</strong><br>
style-loader will check the module.id and then use it to identify and add dom to html, but during the first request, the hot module is missing the id property, so cause the error</p>

<p dir="auto"><strong>a simple solution</strong><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/19724409/168262869-ff257b0b-547a-44e3-895d-58afd7d03a66.png"><img width="1200" alt="image" src="https://user-images.githubusercontent.com/19724409/168262869-ff257b0b-547a-44e3-895d-58afd7d03a66.png" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  v5.72.0<br>
Node.js version:  v12.19.2<br>
Operating System: macOS<br>
Additional tools:<br>
style-loader@3.3.1</p>