<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">On certain browsers, like Chrome on iOS, there is already a progress bar in place causing duplicate progress bars when using the with-loading example repo.</p>
<h2 dir="auto">To Reproduce</h2>
<ol dir="auto">
<li>Follow instructions on <a href="https://github.com/zeit/next.js/tree/canary/examples/with-loading">https://github.com/zeit/next.js/tree/canary/examples/with-loading</a> to set project up.</li>
<li>Install and run locally</li>
<li>Navigate to the non-existing page using Chrome on iOS</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">NProgress should not be displayed for browsers that have default progress bars. This is a next.js issue because the example should account for the behavior of NProgress.</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8594272/57685043-f7a9e780-7671-11e9-974a-8987908cdc5a.png"><img src="https://user-images.githubusercontent.com/8594272/57685043-f7a9e780-7671-11e9-974a-8987908cdc5a.png" alt="Image from iOS" style="max-width: 100%;"></a></p>
<p dir="auto">Hey guys, I'm trying to use the dynamic import system, but it doesn't seem to be working.</p>
<p dir="auto">I'm trying to import components only on the client side and not server side render them.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const ButtonGroup = dynamic(import('../components/base').then(m =&gt; {
  const { ButtonGroup } = m;
  ButtonGroup.__webpackChunkName = m.__webpackChunkName;
  return ButtonGroup;
}), {ssr: false});
const RoundedButton = dynamic(import('../components/base').then(m =&gt; {
  const { RoundedButton } = m;
  RoundedButton.__webpackChunkName = m.__webpackChunkName;
  return RoundedButton;
}), {ssr: false});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">ButtonGroup</span> <span class="pl-c1">=</span> <span class="pl-en">dynamic</span><span class="pl-kos">(</span><span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'../components/base'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">m</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-kos">{</span> ButtonGroup <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-s1">m</span><span class="pl-kos">;</span>
  <span class="pl-v">ButtonGroup</span><span class="pl-kos">.</span><span class="pl-c1">__webpackChunkName</span> <span class="pl-c1">=</span> <span class="pl-s1">m</span><span class="pl-kos">.</span><span class="pl-c1">__webpackChunkName</span><span class="pl-kos">;</span>
  <span class="pl-k">return</span> <span class="pl-v">ButtonGroup</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">ssr</span>: <span class="pl-c1">false</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">RoundedButton</span> <span class="pl-c1">=</span> <span class="pl-en">dynamic</span><span class="pl-kos">(</span><span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'../components/base'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">m</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-kos">{</span> RoundedButton <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-s1">m</span><span class="pl-kos">;</span>
  <span class="pl-v">RoundedButton</span><span class="pl-kos">.</span><span class="pl-c1">__webpackChunkName</span> <span class="pl-c1">=</span> <span class="pl-s1">m</span><span class="pl-kos">.</span><span class="pl-c1">__webpackChunkName</span><span class="pl-kos">;</span>
  <span class="pl-k">return</span> <span class="pl-v">RoundedButton</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">ssr</span>: <span class="pl-c1">false</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I console logged what RoundedButton should be and I got this giant function:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/2453737/37189149-b06ce93a-2307-11e8-8281-792ad3d5aa89.png"><img src="https://user-images.githubusercontent.com/2453737/37189149-b06ce93a-2307-11e8-8281-792ad3d5aa89.png" alt="screen shot 2018-03-08 at 7 33 42 pm" style="max-width: 100%;"></a></p>
<p dir="auto">In my render function I have this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;RoundedButton
    disabled={!auth.isLoggedIn || draft}
    flat={true}
    onClick={() =&gt; (
        this.handleBookmark(draft, match.params.id.replace(new RegExp('_', 'g'), ' '))
    )}
    styles={{
        button: [styles.bookmark__button, isBookmarked &amp;&amp; styles.bookmarked]
    }}
    type=&quot;button&quot;
    value={isBookmarked ? 'Bookmarked' : 'Bookmark'}
/&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">RoundedButton</span>
    <span class="pl-c1">disabled</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">!</span><span class="pl-s1">auth</span><span class="pl-kos">.</span><span class="pl-c1">isLoggedIn</span> <span class="pl-c1">||</span> <span class="pl-s1">draft</span><span class="pl-kos">}</span>
    <span class="pl-c1">flat</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">true</span><span class="pl-kos">}</span>
    <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">handleBookmark</span><span class="pl-kos">(</span><span class="pl-s1">draft</span><span class="pl-kos">,</span> <span class="pl-s1">match</span><span class="pl-kos">.</span><span class="pl-c1">params</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-v">RegExp</span><span class="pl-kos">(</span><span class="pl-s">'_'</span><span class="pl-kos">,</span> <span class="pl-s">'g'</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s">' '</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
    <span class="pl-kos">)</span><span class="pl-kos">}</span>
    <span class="pl-c1">styles</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span>
        <span class="pl-c1">button</span>: <span class="pl-kos">[</span><span class="pl-s1">styles</span><span class="pl-kos">.</span><span class="pl-c1">bookmark__button</span><span class="pl-kos">,</span> <span class="pl-s1">isBookmarked</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">styles</span><span class="pl-kos">.</span><span class="pl-c1">bookmarked</span><span class="pl-kos">]</span>
    <span class="pl-kos">}</span><span class="pl-kos">}</span>
    <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"button"</span>
    <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">isBookmarked</span> ? <span class="pl-s">'Bookmarked'</span> : <span class="pl-s">'Bookmark'</span><span class="pl-kos">}</span>
<span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">But I'm getting an error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TypeError: Cannot read property 'click' of undefined"><pre class="notranslate"><code class="notranslate">TypeError: Cannot read property 'click' of undefined
</code></pre></div>
<p dir="auto">which I'm suspecting it doesn't like the onClick I'm passing through there. Anyone know what's up?</p>
<ul dir="auto">
<li>[x ] I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>v5.0.0</td>
</tr>
<tr>
<td>node</td>
<td>v8.1.2</td>
</tr>
<tr>
<td>OS</td>
<td>mac osx</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
</tbody>
</table>