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




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">If you force some async chunks to be in the sync chunk, then the code in other async chunks won't be reused from the sync chunk.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<ol dir="auto">
<li>Import your sync chunks
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  import bar from 'foo/bar/index.js';"><pre class="notranslate">  <span class="pl-k">import</span> <span class="pl-s1">bar</span> <span class="pl-k">from</span> <span class="pl-s">'foo/bar/index.js'</span><span class="pl-kos">;</span></pre></div>
</li>
<li>Use async import in the same directory
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  import(/* webpackChunkName: &quot;page-[request]&quot; */ `foo/${pageName}/index.js`)"><pre class="notranslate">  <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-c">/* webpackChunkName: "page-[request]" */</span> <span class="pl-s">`foo/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">pageName</span><span class="pl-kos">}</span></span>/index.js`</span><span class="pl-kos">)</span></pre></div>
</li>
<li>Use <code class="notranslate">splitChunks.chunks: 'all'</code>;</li>
</ol>
<p dir="auto">The code in sync and async chunks will be duplicated.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// app chunk (sync)
(window.webpackJsonp = window.webpackJsonp || []).push([[3, 1], {
    &quot;/rhA&quot;: function(t, e, s) {"><pre class="notranslate"><span class="pl-c">// app chunk (sync)</span>
<span class="pl-kos">(</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">webpackJsonp</span> <span class="pl-c1">=</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">webpackJsonp</span> <span class="pl-c1">||</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">push</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-kos">[</span><span class="pl-c1">3</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-s">"/rhA"</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">t</span><span class="pl-kos">,</span> <span class="pl-s1">e</span><span class="pl-kos">,</span> <span class="pl-s1">s</span><span class="pl-kos">)</span> <span class="pl-kos">{</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// page A chunk (async)
(window.webpackJsonp = window.webpackJsonp || []).push([[4], {
    &quot;/rhA&quot;: function(t, e, n) {"><pre class="notranslate"><span class="pl-c">// page A chunk (async)</span>
<span class="pl-kos">(</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">webpackJsonp</span> <span class="pl-c1">=</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">webpackJsonp</span> <span class="pl-c1">||</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">push</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-kos">[</span><span class="pl-c1">4</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-s">"/rhA"</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">t</span><span class="pl-kos">,</span> <span class="pl-s1">e</span><span class="pl-kos">,</span> <span class="pl-s1">n</span><span class="pl-kos">)</span> <span class="pl-kos">{</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// page B chunk (async)
(window.webpackJsonp = window.webpackJsonp || []).push([[7], {
    &quot;/rhA&quot;: function(t, e, n) {"><pre class="notranslate"><span class="pl-c">// page B chunk (async)</span>
<span class="pl-kos">(</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">webpackJsonp</span> <span class="pl-c1">=</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">webpackJsonp</span> <span class="pl-c1">||</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">push</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-kos">[</span><span class="pl-c1">7</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-s">"/rhA"</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">t</span><span class="pl-kos">,</span> <span class="pl-s1">e</span><span class="pl-kos">,</span> <span class="pl-s1">n</span><span class="pl-kos">)</span> <span class="pl-kos">{</span></pre></div>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Async chunks should not have duplicated code.</p>
<p dir="auto"><strong>A more detalied example</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// App entrypoint
import loadPages from '@modules/app/loadPages.js';
import homePage from '@pages/home/index.js';
import aboutPage from '@pages/about/index.js';

const criticalPages = {
  homePage,
  aboutPage
};

loadPages(criticalPages);"><pre class="notranslate"><span class="pl-c">// App entrypoint</span>
<span class="pl-k">import</span> <span class="pl-s1">loadPages</span> <span class="pl-k">from</span> <span class="pl-s">'@modules/app/loadPages.js'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">homePage</span> <span class="pl-k">from</span> <span class="pl-s">'@pages/home/index.js'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">aboutPage</span> <span class="pl-k">from</span> <span class="pl-s">'@pages/about/index.js'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">criticalPages</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  homePage<span class="pl-kos">,</span>
  aboutPage
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-en">loadPages</span><span class="pl-kos">(</span><span class="pl-s1">criticalPages</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// loadPages.js
const loadPage = criticalPages =&gt; async pageName =&gt; {
  if (pageName in criticalPages) {
    try {
      criticalPages[pageName]();
    }
    catch(err) {
      console.log(`Error loading page: '${pageName}'`);
      console.log(err);
    }
    return;
  }
  try {
    import(/* webpackChunkName: &quot;page-[request]&quot; */ `@pages/${pageName}/index.js`)
      .then(res =&gt; {
        res &amp;&amp; res.default &amp;&amp; res.default()
      });
  }
  catch(err) {
    console.log(`Page loader not found for page '${pageName}'`);
    console.log(err);
  }
};

export default function loadPages(criticalPages = {}) {
  const documentPages = document.documentElement?.dataset.pages;
  if (!documentPages) return;

  const pagesToLoad = JSON.parse(documentPages);

  const loadPageWithCritical = loadPage(criticalPages);

  pagesToLoad?.forEach(loadPageWithCritical);
};"><pre class="notranslate"><span class="pl-c">// loadPages.js</span>
<span class="pl-k">const</span> <span class="pl-en">loadPage</span> <span class="pl-c1">=</span> <span class="pl-s1">criticalPages</span> <span class="pl-c1">=&gt;</span> <span class="pl-k">async</span> <span class="pl-s1">pageName</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">pageName</span> <span class="pl-k">in</span> <span class="pl-s1">criticalPages</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">try</span> <span class="pl-kos">{</span>
      <span class="pl-s1">criticalPages</span><span class="pl-kos">[</span><span class="pl-s1">pageName</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-k">catch</span><span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">`Error loading page: '<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">pageName</span><span class="pl-kos">}</span></span>'`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">return</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-k">try</span> <span class="pl-kos">{</span>
    <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-c">/* webpackChunkName: "page-[request]" */</span> <span class="pl-s">`@pages/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">pageName</span><span class="pl-kos">}</span></span>/index.js`</span><span class="pl-kos">)</span>
      <span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">res</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-s1">res</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-c1">default</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">default</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-k">catch</span><span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">`Page loader not found for page '<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">pageName</span><span class="pl-kos">}</span></span>'`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">err</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-k">export</span> <span class="pl-k">default</span> <span class="pl-k">function</span> <span class="pl-en">loadPages</span><span class="pl-kos">(</span><span class="pl-s1">criticalPages</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">documentPages</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">documentElement</span><span class="pl-kos">?.</span><span class="pl-c1">dataset</span><span class="pl-kos">.</span><span class="pl-c1">pages</span><span class="pl-kos">;</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">documentPages</span><span class="pl-kos">)</span> <span class="pl-k">return</span><span class="pl-kos">;</span>

  <span class="pl-k">const</span> <span class="pl-s1">pagesToLoad</span> <span class="pl-c1">=</span> <span class="pl-c1">JSON</span><span class="pl-kos">.</span><span class="pl-en">parse</span><span class="pl-kos">(</span><span class="pl-s1">documentPages</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">const</span> <span class="pl-s1">loadPageWithCritical</span> <span class="pl-c1">=</span> <span class="pl-en">loadPage</span><span class="pl-kos">(</span><span class="pl-s1">criticalPages</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-s1">pagesToLoad</span><span class="pl-kos">?.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-s1">loadPageWithCritical</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 following the <a href="http://webpack.github.io/docs/tutorials/getting-started/" rel="nofollow">tutorial</a>, this line:<br>
<code class="notranslate">webpack ./entry.js bundle.js --module-bind "css=style!css"</code><br>
... gives me this error...<br>
<code class="notranslate">zsh: event not found: css</code></p>
<p dir="auto">This [https://github.com/<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="31736678" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/242" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/242/hovercard" href="https://github.com/webpack/webpack/issues/242">/issues/242</a>] says that it need <code class="notranslate">\</code>, which works for me, so the command would be:<br>
<code class="notranslate">webpack ./entry.js bundle.js --module-bind "css=style\!css"</code></p>
<p dir="auto">Hope that helps.</p>