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




<p dir="auto"><strong>What is the current behavior?</strong><br>
Lets consider the following screenshot:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13358855/149645488-c515f9e1-140c-4843-aea5-d657797b33ab.png"><img src="https://user-images.githubusercontent.com/13358855/149645488-c515f9e1-140c-4843-aea5-d657797b33ab.png" alt="image" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13358855/149645544-bb32c50e-f7bd-4670-8a32-c01ee4bf8703.png"><img src="https://user-images.githubusercontent.com/13358855/149645544-bb32c50e-f7bd-4670-8a32-c01ee4bf8703.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Even after the control reaches the let assignment statement, the previous imports are undefined. Could anyone explain why is that so?<br>
Also the following shows that the bundled internal variables are defined though:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13358855/149645560-e0595dfe-bdfc-494d-8a07-f373a2a7095a.png"><img src="https://user-images.githubusercontent.com/13358855/149645560-e0595dfe-bdfc-494d-8a07-f373a2a7095a.png" alt="image" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13358855/149645562-10f8ed38-7309-48a9-ac18-31c8430e3ff1.png"><img src="https://user-images.githubusercontent.com/13358855/149645562-10f8ed38-7309-48a9-ac18-31c8430e3ff1.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Why does this behavior exist in javascript? Is this expected or something different.<br>
Its in mozilla firefox browser (95.0.1)<br>
Its undefined even for npm libraries as well, which is in node_modules folder. Why does this happen, which seems slightly not so logical. Is there any issue with the bundler?</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<ol dir="auto">
<li>Create a react app. Introduce redux in it.</li>
<li>Import that store and provide it in the index.js while rendering the root component.</li>
</ol>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
Just pls explain why is this happening in the browser (firefox 95.0.1) ? Because of this none of the variables imported have any valid values. How to use them in the file post that lines' execution?<br>
Pl give your answer in a more descriptive manner instead of just saying that this behavior is expected. What is exactly this behavior. If this exists how can anyone use any of the imports in the file below? Whats the purpose of importing something you need above, if it will never get imported even after that line is executed?</p>
<p dir="auto">As far as I know as javascript is a synchronous language except the specific functionalities like promises, async/await, I guess everything else must be synchronous by its design, which is why this unpredictability in its behavior is confusing.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version: 5.66.0<br>
Node.js version: 16.13.2<br>
Operating System: Linux<br>
Additional tools:</p>
<p dir="auto">Dummy code repo created : I also created a dummy repo if anyone looks into it at <a href="https://github.com/12sam12/dummy_app">12sam12/dummy_app</a></p>
<p dir="auto">The question is not about sourcemaps. Its about why the values of the imports used in the unminified or jsx version of files are undefined?? Source maps are nothing and just for the simplicity/conveniency of the debugger. Only when sourcemaps are enabled the client would even be able to view files in this manner and granularity. So already the client is able to view in this manner, which shows that the source maps are enabled.</p>
<p dir="auto">Then why the following person asked for a test repo in the following discussion??<br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3805047" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/discussions/15180" data-hovercard-type="discussion" data-hovercard-url="/webpack/webpack/discussions/15180/hovercard" href="https://github.com/webpack/webpack/discussions/15180">#15180</a></p>
<p dir="auto">Issues and discussions opened on this topic without any response:<br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1109981123" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/15215" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/15215/hovercard" href="https://github.com/webpack/webpack/issues/15215">#15215</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3805047" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/discussions/15180" data-hovercard-type="discussion" data-hovercard-url="/webpack/webpack/discussions/15180/hovercard" href="https://github.com/webpack/webpack/discussions/15180">#15180</a></p>
<h2 dir="auto">Feature request</h2>





<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Code splitting should work in child compilations without the need for additional configuration.</p>
<p dir="auto"><strong>What is motivation or use case for adding/changing the behavior?</strong></p>
<p dir="auto">Without an intimate understanding of all of webpack's internal plugins and the hooks they use, it's unclear what functionality you get and don't get when when creating a child compiler. I found it surprising that a child compiler cannot, at minimum, build an app that uses code splitting given that code splitting is not a feature that you usually have to enable otherwise.</p>
<p dir="auto">In my use case, I'd like to have a 2nd compilation that's <em>almost identical</em> to the parent compilation with the exception that a different <code class="notranslate">optimization</code> option is set. Since the input to both compilations are identical I'd like to reuse as much work as possible across compilations so that webpack doesn't perform 2x the work.</p>
<p dir="auto">This appears to be the minimal amount of code required to create a compilation similar to the parent:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = class CopyCatCompilerPlugin {
  apply(mainCompiler) {
    mainCompiler.hooks.make.tapAsync(
      'ChildCompilerPlugin',
      (compilation, callback) =&gt; {
        const childCompiler = compilation.createChildCompiler(
          'child',
          mainCompiler.options.output,
          [
            new JsonpTemplatePlugin(), // required since `thisCompilation` taps are not copied
          ]
        );

        // required since `compile` taps are not copied by default
        childCompiler.hooks.compile.taps = mainCompiler.hooks.compile.taps.slice();

        // prevent errors like &quot;Conflict: Multiple assets emit to the same filename 0.js&quot;
        // since the child compilation will result is identically named split chunks
        childCompiler.options.output.chunkFilename = `child-${mainCompiler.options.output.chunkFilename}`;

        // filter out unwanted optimization plugins here

        // add identical entry with a different bundle name
        new SingleEntryPlugin(
          mainCompiler.context,
          './src/index.js',
          'main-2'
        ).apply(childCompiler);

        childCompiler.runAsChild(callback);
      }
    );
  }
};"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-k">class</span> <span class="pl-v">CopyCatCompilerPlugin</span> <span class="pl-kos">{</span>
  <span class="pl-en">apply</span><span class="pl-kos">(</span><span class="pl-s1">mainCompiler</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">mainCompiler</span><span class="pl-kos">.</span><span class="pl-c1">hooks</span><span class="pl-kos">.</span><span class="pl-c1">make</span><span class="pl-kos">.</span><span class="pl-en">tapAsync</span><span class="pl-kos">(</span>
      <span class="pl-s">'ChildCompilerPlugin'</span><span class="pl-kos">,</span>
      <span class="pl-kos">(</span><span class="pl-s1">compilation</span><span class="pl-kos">,</span> <span class="pl-s1">callback</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-k">const</span> <span class="pl-s1">childCompiler</span> <span class="pl-c1">=</span> <span class="pl-s1">compilation</span><span class="pl-kos">.</span><span class="pl-en">createChildCompiler</span><span class="pl-kos">(</span>
          <span class="pl-s">'child'</span><span class="pl-kos">,</span>
          <span class="pl-s1">mainCompiler</span><span class="pl-kos">.</span><span class="pl-c1">options</span><span class="pl-kos">.</span><span class="pl-c1">output</span><span class="pl-kos">,</span>
          <span class="pl-kos">[</span>
            <span class="pl-k">new</span> <span class="pl-v">JsonpTemplatePlugin</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-c">// required since `thisCompilation` taps are not copied</span>
          <span class="pl-kos">]</span>
        <span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-c">// required since `compile` taps are not copied by default</span>
        <span class="pl-s1">childCompiler</span><span class="pl-kos">.</span><span class="pl-c1">hooks</span><span class="pl-kos">.</span><span class="pl-c1">compile</span><span class="pl-kos">.</span><span class="pl-c1">taps</span> <span class="pl-c1">=</span> <span class="pl-s1">mainCompiler</span><span class="pl-kos">.</span><span class="pl-c1">hooks</span><span class="pl-kos">.</span><span class="pl-c1">compile</span><span class="pl-kos">.</span><span class="pl-c1">taps</span><span class="pl-kos">.</span><span class="pl-en">slice</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-c">// prevent errors like "Conflict: Multiple assets emit to the same filename 0.js"</span>
        <span class="pl-c">// since the child compilation will result is identically named split chunks</span>
        <span class="pl-s1">childCompiler</span><span class="pl-kos">.</span><span class="pl-c1">options</span><span class="pl-kos">.</span><span class="pl-c1">output</span><span class="pl-kos">.</span><span class="pl-c1">chunkFilename</span> <span class="pl-c1">=</span> <span class="pl-s">`child-<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">mainCompiler</span><span class="pl-kos">.</span><span class="pl-c1">options</span><span class="pl-kos">.</span><span class="pl-c1">output</span><span class="pl-kos">.</span><span class="pl-c1">chunkFilename</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">;</span>

        <span class="pl-c">// filter out unwanted optimization plugins here</span>

        <span class="pl-c">// add identical entry with a different bundle name</span>
        <span class="pl-k">new</span> <span class="pl-v">SingleEntryPlugin</span><span class="pl-kos">(</span>
          <span class="pl-s1">mainCompiler</span><span class="pl-kos">.</span><span class="pl-c1">context</span><span class="pl-kos">,</span>
          <span class="pl-s">'./src/index.js'</span><span class="pl-kos">,</span>
          <span class="pl-s">'main-2'</span>
        <span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">apply</span><span class="pl-kos">(</span><span class="pl-s1">childCompiler</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-s1">childCompiler</span><span class="pl-kos">.</span><span class="pl-en">runAsChild</span><span class="pl-kos">(</span><span class="pl-s1">callback</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">In general, it seems like the pattern of running multiple almost-identical compilations is useful in cases where you want to compile to different targets while not duplicating work across compilation. Or when you want webpack to bundle a test runner bundle but not have the test bundle entry affect your code splits.</p>
<p dir="auto">Is there a better approach to this problem so that it's easy to replicate the parent compilation with slightly different options while maintaining performance?</p>
<p dir="auto">For context, I'm on webpack 4.27.1 but cannot migrate to webpack 5 since I have many custom plugins and loaders that will require work to make compatible with webpack 5.</p>
<p dir="auto"><strong>How should this be implemented in your opinion?</strong></p>
<p dir="auto">Have <code class="notranslate">Compiler.createChildCompiler</code> ensure that the <code class="notranslate">JsonpTempaltePlugin</code> is applied.</p>
<p dir="auto"><strong>Are you willing to work on this yourself?</strong></p>
<p dir="auto">yes</p>