<p dir="auto">Ehen using build with libraryTarget: 'umd',  targeted build in node enviroment; getting:<br>
AR:<br>
Node give "ReferenceError: window is not defined"<br>
ER:<br>
no issues  in node &amp; browser</p>
<p dir="auto">Not possible to set target param to match both platforms;</p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.</strong><br>
Webpack version 4.1.1<br>
It's due to webpackUniversalModuleDefinition - "this" should be as param instead of window</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Report a bug</p>


<p dir="auto"><strong>What is the current behavior?</strong><br>
We are upgrading a giant codebase from Webpack 3 to 4 and are blocked on one issue. We are seeing significant code duplication in final bundles when the same JS module is required synchronously and asynchronously in the route code.</p>
<p dir="auto">The JS module referenced from the entry point file contains synchronous require to the page code like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// entrypoints.js
&quot;HomeDesktopPage&quot;:&quot;HomeDesktopEntry.js&quot;"><pre class="notranslate"><code class="notranslate">// entrypoints.js
"HomeDesktopPage":"HomeDesktopEntry.js"
</code></pre></div>
<p dir="auto"><code class="notranslate">HomeDesktopEntry.js</code> requires the relevant page module <code class="notranslate">HomeDesktop.js</code> synchronously in order to bundle all dependencies for the initial page load:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// HomeDesktopEntry.js:

require(&quot;./logging&quot;);
// make sure component is part of the entry point
require(&quot;./HomeDesktop&quot;);"><pre class="notranslate"><code class="notranslate">// HomeDesktopEntry.js:

require("./logging");
// make sure component is part of the entry point
require("./HomeDesktop");
</code></pre></div>
<p dir="auto">In another JS module in the <code class="notranslate">HomeDesktopEntry</code> dependency tree, we require <code class="notranslate">HomeDesktop</code> asynchronously:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="require.ensure([], () =&gt; {
   returnValue.resolve({
       page: require(&quot;./pageTypes/ActivishDetailsPage/HomeDesktop&quot;),
   });
});"><pre class="notranslate"><code class="notranslate">require.ensure([], () =&gt; {
   returnValue.resolve({
       page: require("./pageTypes/ActivishDetailsPage/HomeDesktop"),
   });
});
</code></pre></div>
<p dir="auto">Webpack will generate additional bundles for "HomeDesktopLazy" and load them on demand when this code is executed. The lazy loaded chunks contain duplicated JS modules that were already bundled and loaded initially when we navigated to <code class="notranslate">HomeDesktopEntry</code>. Even though we required  <code class="notranslate">HomeDesktop</code> in the entry point file and bundled all its dependencies, Webpack runtime generates and loads additional lazy chunks for the asynchronous require of that same module. I've built a little tool to measure the duplication and on our giant codebase, this amounted to additional 3MB of just duplicated JS modules. This creates some additional problems with page performance too since we need to wait for those async chunks to load in order to boot up the page client side.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
The behavior happens only with some <code class="notranslate">splitChunks</code> configs. For example, with the below config we get 68 JS bundles for the <code class="notranslate">HomeDesktopPage</code> route but no duplication happens:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="optimization: {
   splitChunks: {
       chunks: &quot;all&quot;,
       minSize: 0,
       maxInitialRequests: Infinity,
       maxAsyncRequests: Infinity,"><pre class="notranslate"><code class="notranslate">optimization: {
   splitChunks: {
       chunks: "all",
       minSize: 0,
       maxInitialRequests: Infinity,
       maxAsyncRequests: Infinity,
</code></pre></div>
<p dir="auto">Trying to reduce the number of bundles and initial requests, however, does cause the above bug and significant JS duplication:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="optimization: {
   splitChunks: {
       chunks: &quot;all&quot;,
       minSize: 500000,
       maxInitialRequests: 5,
       maxAsyncRequests: 5,"><pre class="notranslate"><code class="notranslate">optimization: {
   splitChunks: {
       chunks: "all",
       minSize: 500000,
       maxInitialRequests: 5,
       maxAsyncRequests: 5,
</code></pre></div>
<p dir="auto">Our codebase is huge, and I am not sure how easy it will be to create a minimal repro example. I am working on it, but wanted to post the problem in the meantime just in case there is a known solution or an explanation for it. Thanks so much for any help!</p>



<p dir="auto"><strong>What is the expected behavior?</strong><br>
No additional bundles are generated and loaded on demand when the same JS module is required asynchronously if it was previously required synchronously.</p>
<p dir="auto"><strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong></p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.</strong></p>
<p dir="auto">Node 8 and 10, we tried on both<br>
webpack 4.28<br>
MacOS<br>
Chome</p>