<p dir="auto">I'm trying to combine the <a href="https://github.com/webpack/webpack/tree/master/examples/two-explicit-vendor-chunks">two-explicit-vendor-trunk</a> example with code splitting. But cannot make it to work.</p>
<p dir="auto">I have two pages (NOT real pages, it's an SPA using react and react-router):</p>
<ul dir="auto">
<li>/ : needs only <code class="notranslate">vendor.js</code></li>
<li>/d3 : needs both <code class="notranslate">vendor.js</code> and <code class="notranslate">d3.js</code></li>
</ul>
<p dir="auto">The goal is: when visiting /, only <code class="notranslate">app.js</code> and <code class="notranslate">vendor.js</code> are loaded. When the user navigates to /d3, <code class="notranslate">d3.js</code> is loaded as needed. Here is how I try:</p>
<p dir="auto"><a href="https://github.com/kawing-chiu/flask-react-redux-example/blob/bc6b52b8eb4978a98561a83f3cf623b041c80a65/client/webpack_config/webpack.dev.config.js">webpack</a> <a href="https://github.com/kawing-chiu/flask-react-redux-example/blob/bc6b52b8eb4978a98561a83f3cf623b041c80a65/client/webpack_config/common.config.js">config</a>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="entry: { 
  vendor: [ 
    'react',
    'react-dom',
    'react-router',
    ...
  ],
  d3: [ 
    'd3',
  ],
  app: [
      './src/js/index',
  ],
},
plugins: [ 
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: Infinity,
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'd3',
    minChunks: Infinity,
    // not sure about the async option here, but without it error occurs
    async: true,
  }),
  ...
],"><pre class="notranslate"><code class="notranslate">entry: { 
  vendor: [ 
    'react',
    'react-dom',
    'react-router',
    ...
  ],
  d3: [ 
    'd3',
  ],
  app: [
      './src/js/index',
  ],
},
plugins: [ 
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: Infinity,
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'd3',
    minChunks: Infinity,
    // not sure about the async option here, but without it error occurs
    async: true,
  }),
  ...
],
</code></pre></div>
<p dir="auto"><a href="https://github.com/kawing-chiu/flask-react-redux-example/blob/bc6b52b8eb4978a98561a83f3cf623b041c80a65/client/src/js/Router.jsx">Router.jsx</a> (I'm using react-router):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export default (
  &lt;Router history={createBrowserHistory()}&gt;
      ...
      &lt;Route path=&quot;d3&quot; getComponent={(location, callback) =&gt; {
        require.ensure([], (require) =&gt; {
          callback(null, require('./pages/D3'));
        });
      }} /&gt;
      ...
  &lt;/Router&gt;
);"><pre class="notranslate"><code class="notranslate">export default (
  &lt;Router history={createBrowserHistory()}&gt;
      ...
      &lt;Route path="d3" getComponent={(location, callback) =&gt; {
        require.ensure([], (require) =&gt; {
          callback(null, require('./pages/D3'));
        });
      }} /&gt;
      ...
  &lt;/Router&gt;
);
</code></pre></div>
<p dir="auto">This config doesn't work as expected since the <code class="notranslate">d3.js</code> bundle is generated but completely ignored by other bundles. And <code class="notranslate">d3.js</code> is also duplicated in chunk <code class="notranslate">1.1.js</code>. So how can I make this to work? I need this configuration because d3 is too large and slows down initial loading on home page a lot. Furthermore I need to do long-term caching on both <code class="notranslate">vendor.js</code> and <code class="notranslate">d3.js</code> so both must be split out as vendor chunks.</p>
<p dir="auto"><strong>I'm submitting a bug report</strong></p>
<p dir="auto"><strong>Webpack version:</strong><br>
1.13.2</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
OSX</p>
<p dir="auto"><strong>Current behavior:</strong></p>
<p dir="auto">Errors in the browser console appear duplicated, regardless of the loader:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/810438/18614527/ad7c0eb0-7d98-11e6-991e-bc63c04ff8d3.png"><img width="584" alt="screen shot 2016-09-18 at 12 04 43" src="https://cloud.githubusercontent.com/assets/810438/18614527/ad7c0eb0-7d98-11e6-991e-bc63c04ff8d3.png" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/810438/18614536/c7d36bf0-7d98-11e6-8b67-8037429b3876.png"><img width="543" alt="screen shot 2016-09-18 at 12 09 33" src="https://cloud.githubusercontent.com/assets/810438/18614536/c7d36bf0-7d98-11e6-8b67-8037429b3876.png" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Expected/desired behavior:</strong></p>
<p dir="auto">The error message should not be printed twice.</p>
<ul dir="auto">
<li><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.</strong></li>
</ul>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npm i -g create-react-app
create-react-app mystuff --scripts-version 0.5.1
cd mystuff
npm start"><pre class="notranslate">npm i -g create-react-app
create-react-app mystuff --scripts-version 0.5.1
<span class="pl-c1">cd</span> mystuff
npm start</pre></div>
<p dir="auto">Then make a syntax error in <code class="notranslate">src/App.js</code> or <code class="notranslate">src/App.css</code> and inspect browser output.<br>
You can find the config <a href="https://github.com/facebookincubator/create-react-app/blob/bf12c41675cd278a9910e734f82d03e7fe0faf2f/config/webpack.config.dev.js">here</a>.</p>
<ul dir="auto">
<li><strong>What is the expected behavior?</strong></li>
</ul>
<p dir="auto">The error message should not be printed twice.</p>
<ul dir="auto">
<li><strong>What is the motivation / use case for changing the behavior?</strong></li>
</ul>
<p dir="auto">Seeing it printed twice is confusing and annoying.</p>
<ul dir="auto">
<li><strong>Browser:</strong> all</li>
<li><strong>Language:</strong> all</li>
</ul>
<hr>
<p dir="auto">(I file this in Webpack repo because the error string is passed to WDS already in this form.)</p>