<p dir="auto">We <code class="notranslate">import</code> two mini-apps, both depend upon <a href="https://github.com/formatjs/react-intl"><code class="notranslate">react-intl</code></a>, but each are using different versions of it (which leads to breaking changes)</p>
<ul dir="auto">
<li>A: <code class="notranslate">react-intl</code>@<strong>^2.7.3</strong></li>
<li>B: <code class="notranslate">react-intl</code>@<strong>^3.1.8</strong></li>
</ul>
<p dir="auto"><a href="https://webpack.js.org/plugins/split-chunks-plugin/" rel="nofollow"><code class="notranslate">SplitChunksPlugin</code></a> does not seem to be aware of the difference of the two 🤔<br>
It would be great if the official docs would clearly state how different module versions are handled, especially regarding breaking changes/major version numbers, is <a href="https://webpack.js.org/plugins/split-chunks-plugin/" rel="nofollow"><code class="notranslate">SplitChunksPlugin</code></a> aware of <code class="notranslate">package.json</code>'s dependecies version?</p>
<p dir="auto">This issue has been raised  several times, but I think is not handled completely:</p>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="52973083" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/646" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/646/hovercard" href="https://github.com/webpack/webpack/issues/646">#646</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="297783479" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/6505" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/6505/hovercard" href="https://github.com/webpack/webpack/issues/6505">#6505</a></li>
</ul>
<h2 dir="auto">tl;dr</h2>
<p dir="auto">Webpack should produce the same build whether a module is linked or not.</p>
<h2 dir="auto">In depth</h2>
<p dir="auto">Considering the following dependency trees:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="project@1.0.0
├── babel-runtime@5.1.9
└── sub-project@1.0.0"><pre class="notranslate"><span class="pl-s1">project</span>@<span class="pl-c1">1.0</span><span class="pl-c1">.0</span>
<span class="pl-s1">├──</span> <span class="pl-s1">babel</span><span class="pl-c1">-</span><span class="pl-s1">runtime</span>@<span class="pl-c1">5.1</span><span class="pl-c1">.9</span>
<span class="pl-s1">└──</span> <span class="pl-s1">sub</span><span class="pl-c1">-</span><span class="pl-s1">project</span>@<span class="pl-c1">1.0</span><span class="pl-c1">.0</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="sub-project@1.0.0
└── babel-runtime@5.1.9"><pre class="notranslate"><span class="pl-s1">sub</span><span class="pl-c1">-</span><span class="pl-s1">project</span>@<span class="pl-c1">1.0</span><span class="pl-c1">.0</span>
<span class="pl-s1">└──</span> <span class="pl-s1">babel</span><span class="pl-c1">-</span><span class="pl-s1">runtime</span>@<span class="pl-c1">5.1</span><span class="pl-c1">.9</span></pre></div>
<p dir="auto"><strong>Notice:</strong> NPM does not include <code class="notranslate">babel-runtime</code> under <code class="notranslate">sub-project</code> when <code class="notranslate">npm list</code> is called from <code class="notranslate">project</code>.</p>
<p dir="auto">Webpack builds something link:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="[0] multi main 52 bytes {0} [built]
[1] ./index.js 2.08 kB {0} [built]
[2] ./~/babel-runtime/helpers/interop-require-wildcard.js 148 bytes {0} [built]
[3] ./~/sub-project/index.js 2.46 kB {0} [built]"><pre class="notranslate"><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span> <span class="pl-s1">multi</span> <span class="pl-s1">main</span> <span class="pl-c1">52</span> <span class="pl-s1">bytes</span> <span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span> <span class="pl-kos">[</span><span class="pl-s1">built</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-c1">/</span><span class="pl-s1">index</span><span class="pl-kos">.</span><span class="pl-c1">js</span> <span class="pl-c1">2.08</span> <span class="pl-s1">kB</span> <span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span> <span class="pl-kos">[</span><span class="pl-s1">built</span><span class="pl-kos">]</span>
<span class="pl-kos">[</span><span class="pl-c1">2</span><span class="pl-kos">]</span> <span class="pl-kos">.</span><span class="pl-c1">/</span><span class="pl-c1">~</span><span class="pl-pds"><span class="pl-c1">/</span>babel-runtime<span class="pl-c1">/</span>helpers</span><span class="pl-c1">/</span><span class="pl-s1">interop</span><span class="pl-c1">-</span><span class="pl-en">require</span><span class="pl-c1">-</span><span class="pl-s1">wildcard</span><span class="pl-kos">.</span><span class="pl-c1">js</span> <span class="pl-c1">148</span> <span class="pl-s1">bytes</span> <span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span> <span class="pl-kos">[</span><span class="pl-s1">built</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-kos">.</span><span class="pl-c1">/</span><span class="pl-c1">~</span><span class="pl-pds"><span class="pl-c1">/</span>sub-project<span class="pl-c1">/</span>index</span><span class="pl-kos">.</span><span class="pl-c1">js</span> <span class="pl-c1">2.46</span> <span class="pl-s1">kB</span> <span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span> <span class="pl-kos">[</span><span class="pl-s1">built</span><span class="pl-kos">]</span></pre></div>
<p dir="auto">If we run <code class="notranslate">npm link sub-project</code> we obtain the following tree:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="project@1.0.0
├── babel-runtime@5.1.9
└── sub-project@1.0.0 -&gt; /Users/fc/Development/sub-project"><pre class="notranslate"><span class="pl-s1">project</span>@<span class="pl-c1">1.0</span><span class="pl-c1">.0</span>
<span class="pl-s1">├──</span> <span class="pl-s1">babel</span><span class="pl-c1">-</span><span class="pl-s1">runtime</span>@<span class="pl-c1">5.1</span><span class="pl-c1">.9</span>
<span class="pl-s1">└──</span> <span class="pl-s1">sub</span><span class="pl-c1">-</span><span class="pl-s1">project</span>@<span class="pl-c1">1.0</span><span class="pl-c1">.0</span> <span class="pl-c1">-</span><span class="pl-c1">&gt;</span> <span class="pl-pds"><span class="pl-c1">/</span>Users<span class="pl-c1">/</span>fc</span><span class="pl-c1">/</span><span class="pl-v">Development</span><span class="pl-c1">/</span><span class="pl-s1">sub</span><span class="pl-c1">-</span><span class="pl-s1">project</span></pre></div>
<p dir="auto"><strong>Notice:</strong> <code class="notranslate">babel-runtime</code> still doesn't appear under <code class="notranslate">sub-project</code>.</p>
<p dir="auto">But building the project again will duplicate its dependencies:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="[0] multi main 52 bytes {0} [built]
[1] ./index.js 2.08 kB {0} [built]
[2] ./~/babel-runtime/helpers/interop-require-wildcard.js 148 bytes {0} [built]
[3] /Users/fc/Development/sub-project/index.js 2.46 kB {0} [built]
[4] /Users/fc/Development/sub-project/~/babel-runtime/helpers/interop-require-wildcard.js 148 bytes {0} [built]"><pre class="notranslate"><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span> <span class="pl-s1">multi</span> <span class="pl-s1">main</span> <span class="pl-c1">52</span> <span class="pl-s1">bytes</span> <span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span> <span class="pl-kos">[</span><span class="pl-s1">built</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-c1">/</span><span class="pl-s1">index</span><span class="pl-kos">.</span><span class="pl-c1">js</span> <span class="pl-c1">2.08</span> <span class="pl-s1">kB</span> <span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span> <span class="pl-kos">[</span><span class="pl-s1">built</span><span class="pl-kos">]</span>
<span class="pl-kos">[</span><span class="pl-c1">2</span><span class="pl-kos">]</span> <span class="pl-kos">.</span><span class="pl-c1">/</span><span class="pl-c1">~</span><span class="pl-pds"><span class="pl-c1">/</span>babel-runtime<span class="pl-c1">/</span>helpers</span><span class="pl-c1">/</span><span class="pl-s1">interop</span><span class="pl-c1">-</span><span class="pl-en">require</span><span class="pl-c1">-</span><span class="pl-s1">wildcard</span><span class="pl-kos">.</span><span class="pl-c1">js</span> <span class="pl-c1">148</span> <span class="pl-s1">bytes</span> <span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span> <span class="pl-kos">[</span><span class="pl-s1">built</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">/</span><span class="pl-v">Users</span><span class="pl-c1">/</span><span class="pl-s1">fc</span><span class="pl-c1">/</span><span class="pl-v">Development</span><span class="pl-c1">/</span><span class="pl-s1">sub</span><span class="pl-c1">-</span><span class="pl-s1">project</span><span class="pl-c1">/</span><span class="pl-s1">index</span><span class="pl-kos">.</span><span class="pl-c1">js</span> <span class="pl-c1">2.46</span> <span class="pl-s1">kB</span> <span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span> <span class="pl-kos">[</span><span class="pl-s1">built</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-c1">/</span><span class="pl-v">Users</span><span class="pl-c1">/</span><span class="pl-s1">fc</span><span class="pl-c1">/</span><span class="pl-v">Development</span><span class="pl-c1">/</span><span class="pl-s1">sub</span><span class="pl-c1">-</span><span class="pl-s1">project</span><span class="pl-c1">/</span><span class="pl-c1">~</span><span class="pl-pds"><span class="pl-c1">/</span>babel-runtime<span class="pl-c1">/</span>helpers</span><span class="pl-c1">/</span><span class="pl-s1">interop</span><span class="pl-c1">-</span><span class="pl-en">require</span><span class="pl-c1">-</span><span class="pl-s1">wildcard</span><span class="pl-kos">.</span><span class="pl-c1">js</span> <span class="pl-c1">148</span> <span class="pl-s1">bytes</span> <span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span> <span class="pl-kos">[</span><span class="pl-s1">built</span><span class="pl-kos">]</span></pre></div>
<p dir="auto">Using <code class="notranslate">resolve.root</code> or changing the resolve scope of loaders do not change anything.</p>
<h2 dir="auto">Expectations</h2>
<p dir="auto">It would link to be able the link my in-development modules into my project using <code class="notranslate">npm link</code> without having to tweak the webpack config.</p>
<p dir="auto"><strong>The real problem isn't the build size but the unexpected behaviors raised but duplicated dependencies.</strong></p>