<p dir="auto">I'd like to move rarely used/optional features of my application to separate chunks, so they can be loaded lazily.</p>
<p dir="auto">I'm using <code class="notranslate">require.ensure</code> with a chunk name:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="require.ensure([], function(){
    require(&quot;feature-foo&quot;); 
}, &quot;feature-foo&quot;);"><pre class="notranslate"><span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">ensure</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">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"feature-foo"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> 
<span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s">"feature-foo"</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">In the above example <code class="notranslate">feature-foo.js</code> requires other modules from all over the place, but tries to use <code class="notranslate">require.ensure</code> consistently when requiring other features from other chunks.</p>
<p dir="auto">This works as expected only if I have one "feature" chunk. As soon as I add more chunks, many modules end up being in multiple chunks at the same time, massively increasing total size of the application. Example webpack stats have the same issue:</p>
<p dir="auto"><a href="http://webpack.github.io/analyse/#module/119" rel="nofollow">http://webpack.github.io/analyse/#module/119</a></p>
<p dir="auto">How can I ensure that every module lives only in one chunk and that is never ever ever ever in more than one chunk?</p>
<p dir="auto">Unfortunately, the dependency graph of my app is a ball of mud, so I can't guarantee that I don't have any circular dependencies or cross dependencies between chunks.</p>
<p dir="auto">I'd be OK if need for a module to be in more than one chunk was a compilation error, or if the module was moved to the entry chunk, or triggered load of more chunks. Just never duplicate any code.</p>
<p dir="auto">When using next.js 10.2, im unable to successfully re-join the container code with the single runtime chunk.</p>
<p dir="auto">I was previously able to re-merge them with a simple plugin</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    compiler.hooks.emit.tap(PLUGIN_NAME, (compilation) =&gt; {
      const { assets } = compilation;
      const assetArray = Object.keys(assets);

      let runtimePath = assetArray.find((asset) =&gt; {
        return asset.includes(this._options.runtime);
      });
      const runtime = assets[runtimePath];
      let remoteEntryPath = assetArray.find((asset) =&gt; {
        return asset.includes(this._options.fileName);
      });
      const remoteEntry = assets[remoteEntryPath];
      const mergedSource = new ConcatSource(runtime, remoteEntry);
      assets[remoteEntryPath] = mergedSource;
    });"><pre class="notranslate"><code class="notranslate">    compiler.hooks.emit.tap(PLUGIN_NAME, (compilation) =&gt; {
      const { assets } = compilation;
      const assetArray = Object.keys(assets);

      let runtimePath = assetArray.find((asset) =&gt; {
        return asset.includes(this._options.runtime);
      });
      const runtime = assets[runtimePath];
      let remoteEntryPath = assetArray.find((asset) =&gt; {
        return asset.includes(this._options.fileName);
      });
      const remoteEntry = assets[remoteEntryPath];
      const mergedSource = new ConcatSource(runtime, remoteEntry);
      assets[remoteEntryPath] = mergedSource;
    });
</code></pre></div>
<p dir="auto">However, this no longer works and I get a "container does not exist" error, even when typing directly into the browser console <code class="notranslate">window.remoteName</code> will return undefined.</p>
<p dir="auto">My idea is to try and get the runtime requirements added to the normal webpack runtime, then duplicate the asset and strip the hashed name off of it. This should give me a "normal" functioning container capable of booting and running without having to track down and load both the webpack runtime and the container.js file of the remote</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sokra/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/sokra">@sokra</a>, do you have any ideas around how I can force the usually code split runtime requirement back into the standard webpack runtime?</p>