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




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Forgive me if I've misconfigured something, but it seems like if I <code class="notranslate">import {Toggle} from 'react-powerplug'</code> in chunk A and <code class="notranslate">import {Interval} from 'react-powerplug'</code> in chunk B, all of the <code class="notranslate">react-powerplug</code> code winds up in chunk A, because <code class="notranslate">react-powerplug</code> exports a single rollup bundled js module.</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/jedwards1211/webpack-code-splitting-issue">https://github.com/jedwards1211/webpack-code-splitting-issue</a><br>
just clone, <code class="notranslate">yarn install</code> and run <code class="notranslate">webpack</code>.  The output <code class="notranslate">dist/main.js</code> will contain all of the code being used from <code class="notranslate">react-powerplug</code>; the <code class="notranslate">dist/1.js</code> chunk imports <code class="notranslate">Interval</code> from <code class="notranslate">main.js</code>.</p>
<p dir="auto">Here is what the relevant code looks like:</p>
<h3 dir="auto"><code class="notranslate">src/index.js</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Toggle} from 'react-powerplug'
console.log(Toggle)

import('./chunk-b')"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-v">Toggle</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-powerplug'</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-v">Toggle</span><span class="pl-kos">)</span>

<span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'./chunk-b'</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">The output <code class="notranslate">dist/main.js</code> on my machine contained all of the code I used from <code class="notranslate">react-powerplug</code>, whereas <code class="notranslate">dist/1.js</code> just imports <code class="notranslate">Interval</code> from <code class="notranslate">main.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{3:function(o,n,s){&quot;use strict&quot;;s.r(n);var w=s(1);console.log(w.a)}}]);"><pre class="notranslate"><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-en">push</span><span class="pl-kos">(</span><span class="pl-kos">[</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-c1">3</span>:<span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">o</span><span class="pl-kos">,</span><span class="pl-s1">n</span><span class="pl-kos">,</span><span class="pl-s1">s</span><span class="pl-kos">)</span><span class="pl-kos">{</span><span class="pl-s">"use strict"</span><span class="pl-kos">;</span><span class="pl-s1">s</span><span class="pl-kos">.</span><span class="pl-en">r</span><span class="pl-kos">(</span><span class="pl-s1">n</span><span class="pl-kos">)</span><span class="pl-kos">;</span><span class="pl-k">var</span> <span class="pl-s1">w</span><span class="pl-c1">=</span><span class="pl-s1">s</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-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">w</span><span class="pl-kos">.</span><span class="pl-c1">a</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>
<h3 dir="auto"><code class="notranslate">src/chunk-b.js</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Interval} from 'react-powerplug'
console.log(Interval)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-v">Interval</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-powerplug'</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-v">Interval</span><span class="pl-kos">)</span></pre></div>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Code for <code class="notranslate">react-powerplug</code>'s <code class="notranslate">Toggle</code> winds up in <code class="notranslate">main.js</code>, and code for <code class="notranslate">Interval</code> winds up in <code class="notranslate">1.js</code>.</p>
<p dir="auto">Given that it's becoming popular to release packages as rollup bundles, I want to make sure webpack will be able to include part of that rollup bundle in one chunk, and another part of the bundle in another.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version: 4.16.2<br>
Node.js version: 8<br>
Operating System: macOS</p>
<h2 dir="auto">Feature request</h2>
<p dir="auto">Here is the bug-ish issue I'm running into:</p>
<p dir="auto"><a href="https://github.com/jedwards1211/webpack-code-splitting-issue/tree/two-async-chunks">https://github.com/jedwards1211/webpack-code-splitting-issue/tree/two-async-chunks</a></p>





<h3 dir="auto"><code class="notranslate">index.js</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import('./chunk1.js')
import('./chunk2.js')"><pre class="notranslate"><span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'./chunk1.js'</span><span class="pl-kos">)</span>
<span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'./chunk2.js'</span><span class="pl-kos">)</span></pre></div>
<h3 dir="auto"><code class="notranslate">chunk1.js</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Toggle } from 'react-powerplug';
console.log(Toggle)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Toggle</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-powerplug'</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-v">Toggle</span><span class="pl-kos">)</span></pre></div>
<h3 dir="auto"><code class="notranslate">chunk2.js</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Value } from 'react-powerplug';
console.log(Value)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Value</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-powerplug'</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-v">Value</span><span class="pl-kos">)</span></pre></div>
<h3 dir="auto"><code class="notranslate">webpack.config.js</code></h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// webpack.config.js
module.exports = {
  mode: 'production',
  externals: {
    'react': 'React'
  },
}"><pre class="notranslate"><span class="pl-c">// webpack.config.js</span>
<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-kos">{</span>
  <span class="pl-c1">mode</span>: <span class="pl-s">'production'</span><span class="pl-kos">,</span>
  <span class="pl-c1">externals</span>: <span class="pl-kos">{</span>
    <span class="pl-s">'react'</span>: <span class="pl-s">'React'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">webpack it on the command line</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
<code class="notranslate">dist/1.js</code> contains <code class="notranslate">Toggle</code> but not <code class="notranslate">Value</code>.<br>
<code class="notranslate">dist/2.js</code> contains <code class="notranslate">Value</code> but not <code class="notranslate">Toggle</code>.</p>
<p dir="auto"><strong>Current behavior</strong><br>
<code class="notranslate">dist/1.js</code> contains both <code class="notranslate">Toggle</code> and <code class="notranslate">Value</code>.<br>
<code class="notranslate">dist/2.js</code> contains both <code class="notranslate">Toggle</code> and <code class="notranslate">Value</code>.</p>
<p dir="auto">It seems that the tree shaking is applied to <code class="notranslate">react-powerplug</code> main module itself, irrespective of the individual chunks that are importing from it.</p>
<p dir="auto"><strong>What is motivation or use case for adding/changing the behavior?</strong><br>
Many packages nowadays use rollup to bundle their code into a single JS module and distribute that one file (or maybe one bundle for ES5, one bundle for ES2015).  As such, I want to be confident that Webpack will eliminate dead code effectively when several different chunks of my app are importing from a rollup bundle.</p>
<p dir="auto"><strong>How should this be implemented in your opinion?</strong><br>
Hopefully, tree-shaking can be performed on <code class="notranslate">react-powerplug</code> for the import in <code class="notranslate">chunk1.js</code>, and then a second, different round of tree-shaking can be performed for the import in <code class="notranslate">chunk2.js</code>.  Right now it seems like Webpack is only performing one tree-shaking operation on <code class="notranslate">react-powerplug</code> based upon all imports from it from all chunks in my app.</p>
<p dir="auto"><strong>Are you willing to work on this yourself?</strong><br>
I would need a lot of guidance, as this seems like this might require a significant refactor</p>