<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Docs are accurate.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Docs are inaccurate.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Go here: <a href="https://github.com/zeit/next.js#importing-css--sass--less-files">https://github.com/zeit/next.js#importing-css--sass--less-files</a></li>
<li>Click any of the three css/sass/less links</li>
</ol>
<p dir="auto">Happy to put together a quick PR if someone can tell me where the relevant branch is located.</p>
<h1 dir="auto">Examples bug report</h1>
<h2 dir="auto">Example name</h2>
<p dir="auto"><a href="https://github.com/zeit/next.js/tree/master/examples/with-polyfills">with-polyfills</a></p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto"><code class="notranslate">with-polyfills</code> shows how to polyfill missing features prior to initialization of Next app. However, I would like to load polyfills only for the missing features using the dynamic import.</p>
<p dir="auto">For example IntersectionObserver is supported widely in the latest versions of browsers, so it's usually not necessary to load the <a href="https://github.com/w3c/IntersectionObserver/tree/master/polyfill">intersection-observer polyfill</a>. Thus I would like to import the polyfill only when the feature is missing like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// client/polyfills.js

async function loadPolyfills() {
  if (typeof window.IntersectionObserver === 'undefined') {
    await import('intersection-observer')
  }
}
export default loadPolyfills()"><pre class="notranslate"><span class="pl-c">// client/polyfills.js</span>

<span class="pl-k">async</span> <span class="pl-k">function</span> <span class="pl-en">loadPolyfills</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">IntersectionObserver</span> <span class="pl-c1">===</span> <span class="pl-s">'undefined'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">await</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'intersection-observer'</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">loadPolyfills</span><span class="pl-kos">(</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">When I do that the application crashes when browser attempts to load the polyfill with the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Unhandled Rejection (ChunkLoadError): Loading chunk 0 failed.
(error: http://localhost:3000/static/chunks/0.js)"><pre class="notranslate"><code class="notranslate">Unhandled Rejection (ChunkLoadError): Loading chunk 0 failed.
(error: http://localhost:3000/static/chunks/0.js)
</code></pre></div>
<p dir="auto">Apparently Webpack points to the chunk in a wrong location, since the chunk is available in <code class="notranslate">_next</code> directory, i.e. <code class="notranslate">http://localhost:3000/_next/static/chunks/0.js</code></p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">I have prepared a repository with reproduction of the issue. The feature detection is <a href="https://github.com/jnv/next-with-polyfills-dynamic-import/blob/master/client/polyfills.js">commented out</a> to reproduce the behavior in any browser.</p>
<ol dir="auto">
<li>Download or clone <a href="https://github.com/jnv/next-with-polyfills-dynamic-import">https://github.com/jnv/next-with-polyfills-dynamic-import</a></li>
<li>Install dependencies with <code class="notranslate">yarn</code></li>
<li>Start application with <code class="notranslate">yarn dev</code></li>
<li>Go to <code class="notranslate">http://localhost:3000/</code></li>
<li>See the error</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Browser loads the chunk without error, before Next initialization.</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/616767/62223424-3029a980-b3b5-11e9-9a6d-ef9d9d926270.png"><img src="https://user-images.githubusercontent.com/616767/62223424-3029a980-b3b5-11e9-9a6d-ef9d9d926270.png" alt="Error in browser" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
<li>Browser: does not apply</li>
<li>Version of Next.js: 9.0.2</li>
</ul>