<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">When i create default layout component for my nextjs pages and import it with next/dynamic i see duplicate commons link(in head) and script(in body).</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">I created the repository for reproduction.<br>
<a href="https://github.com/narek1993x/duplicate_commonjs_script">https://github.com/narek1993x/duplicate_commonjs_script</a></p>
<ol dir="auto">
<li>Go to localhost:3000.</li>
<li>Open inspect element on the page.</li>
<li>You can see commons script is duplicated.</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">See only one commons script.</p>
<h2 dir="auto">Screenshot</h2>
<p dir="auto"><a href="https://ibb.co/X4d3KvK" rel="nofollow">https://ibb.co/X4d3KvK</a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: Linux</li>
<li>Browser Chrome</li>
<li>Version of Next.js: 9.0.0</li>
</ul>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">The final generated HTML contains multiple references of the same script when using <code class="notranslate">dynamic(() =&gt; import("XXX"))</code> feature.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;script async=&quot;&quot; data-next-page=&quot;/_rendr&quot; src=&quot;/_next/static/-QRY2dlf37nt2x4YyPE4t/pages/_rendr.js&quot;&gt;&lt;/script&gt;
&lt;script async=&quot;&quot; data-next-page=&quot;/_app&quot; src=&quot;/_next/static/-QRY2dlf37nt2x4YyPE4t/pages/_app.js&quot;&gt;&lt;/script&gt;
&lt;script async=&quot;&quot; src=&quot;/_next/static/chunks/commons.2e47dd92dd81134f73ae.js&quot;&gt;&lt;/script&gt;
&lt;script async=&quot;&quot; src=&quot;/_next/static/chunks/7.08bfb698f640f0ab437a.js&quot;&gt;&lt;/script&gt;
&lt;script async=&quot;&quot; src=&quot;/_next/static/chunks/11.b15a7a54832e0f86eb5f.js&quot;&gt;&lt;/script&gt;
&lt;script async=&quot;&quot; src=&quot;/_next/static/chunks/12.300ea2b94b09addb1f7a.js&quot;&gt;&lt;/script&gt;
&lt;script async=&quot;&quot; src=&quot;/_next/static/chunks/9.9fad9003200f003586d9.js&quot;&gt;&lt;/script&gt;
&lt;script async=&quot;&quot; src=&quot;/_next/static/chunks/8.d50c138bb6c1512ea7a0.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/_next/static/runtime/webpack-0f37fb1d4bd42a96e0fc.js&quot; async=&quot;&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/_next/static/chunks/commons.2e47dd92dd81134f73ae.js&quot; async=&quot;&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/_next/static/runtime/main-dbac27a7acba993626ba.js&quot; async=&quot;&quot;&gt;"><pre class="notranslate"><code class="notranslate">&lt;script async="" data-next-page="/_rendr" src="/_next/static/-QRY2dlf37nt2x4YyPE4t/pages/_rendr.js"&gt;&lt;/script&gt;
&lt;script async="" data-next-page="/_app" src="/_next/static/-QRY2dlf37nt2x4YyPE4t/pages/_app.js"&gt;&lt;/script&gt;
&lt;script async="" src="/_next/static/chunks/commons.2e47dd92dd81134f73ae.js"&gt;&lt;/script&gt;
&lt;script async="" src="/_next/static/chunks/7.08bfb698f640f0ab437a.js"&gt;&lt;/script&gt;
&lt;script async="" src="/_next/static/chunks/11.b15a7a54832e0f86eb5f.js"&gt;&lt;/script&gt;
&lt;script async="" src="/_next/static/chunks/12.300ea2b94b09addb1f7a.js"&gt;&lt;/script&gt;
&lt;script async="" src="/_next/static/chunks/9.9fad9003200f003586d9.js"&gt;&lt;/script&gt;
&lt;script async="" src="/_next/static/chunks/8.d50c138bb6c1512ea7a0.js"&gt;&lt;/script&gt;
&lt;script src="/_next/static/runtime/webpack-0f37fb1d4bd42a96e0fc.js" async=""&gt;&lt;/script&gt;
&lt;script src="/_next/static/chunks/commons.2e47dd92dd81134f73ae.js" async=""&gt;&lt;/script&gt;
&lt;script src="/_next/static/runtime/main-dbac27a7acba993626ba.js" async=""&gt;
</code></pre></div>
<p dir="auto">Firefox downloads twice <code class="notranslate">commons.2e47dd92dd81134f73ae.js</code>, I guess the <code class="notranslate">async</code> flag presents in the first reference, and not present in the second reference make a difference. Chrome does not behave the same.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">You can download the example here <a href="https://github.com/ekino/rendr/blob/master/examples/nextjs-with-remoteapi/">https://github.com/ekino/rendr/blob/master/examples/nextjs-with-remoteapi/</a>.</p>
<p dir="auto">The dynamic declarations are there: <a href="https://github.com/ekino/rendr/blob/master/examples/nextjs-with-remoteapi/pages/_rendr.js#L12-L18">https://github.com/ekino/rendr/blob/master/examples/nextjs-with-remoteapi/pages/_rendr.js#L12-L18</a></p>
<p dir="auto">There is also a live demo here: <a href="https://nextjs-with-remoteapi.rande.now.sh/" rel="nofollow">https://nextjs-with-remoteapi.rande.now.sh/</a></p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">No duplicate references.</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto">If applicable, add screenshots to help explain your problem.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: linux or now.sh env.</li>
<li>Browser: Firefox and Chrome</li>
<li>Version of Next.js: <code class="notranslate">9.0.5</code></li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">Add any other context about the problem here.</p>