<h1 dir="auto">Bug report</h1>
<p dir="auto">The intention is to import a CSS file from third party library that resides in a folder within node_modes. This CSS chunk is not bundled on initial page load (which is fine , I assume, because the client hasn't navigated to the page where the import happens - yet).<br>
But as soon as one tries to navigate to the page that has the import statement (via  client-side routing), nothing seems to happen.</p>
<h2 dir="auto">Environment</h2>
<ul dir="auto">
<li>Next.js 7</li>
<li>Development mode</li>
<li>withCSS plugin registered via</li>
</ul>
<blockquote>
<p dir="auto">const withCSS = require('@zeit/next-css')<br>
module.exports = withCSS({/* my next config */})</p>
</blockquote>
<h2 dir="auto">Bug description</h2>
<p dir="auto">My intention is to lazy load CSS file from third party library that resides in a folder within node_modes.</p>
<p dir="auto">This is what I've done in /pages/pageThatUsesCssFromLibrary.js (see linked demo project below)</p>
<blockquote>
<p dir="auto">import 'rc-slider/dist/rc-slider.min.css';</p>
</blockquote>
<p dir="auto">That works fine when using server rendering, i.e. write <a href="http://localhost:3000/pageThatUsesCssFromLibrary" rel="nofollow">http://localhost:3000/pageThatUsesCssFromLibrary</a> into the browser's address bar and hit enter.</p>
<p dir="auto">However, it does not work if I'm navigating to that page through client-side navigation, i.e. navigate to <a href="http://localhost:3000" rel="nofollow">http://localhost:3000</a> and clicking a Link that navigates to the page:</p>

  Go to page

<p dir="auto">Clicking to the link does not appear to do anything (not even displaying an error message).</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto"><em>Working example</em></p>
<ol dir="auto">
<li>Build the linked demo project</li>
<li>Write <a href="http://localhost:3000/pageThatUsesCssFromLibrary" rel="nofollow">http://localhost:3000/pageThatUsesCssFromLibrary</a> into the address bar, hit Enter and see how the site is displayed  (and the CSS is imported properly) when the page is rendered on the <em>server side</em></li>
</ol>
<p dir="auto"><em>Example that exposes the reported bug</em></p>
<ol dir="auto">
<li>Build the linked demo project</li>
<li>Write <a href="http://localhost:3000" rel="nofollow">http://localhost:3000</a> and hit Enter</li>
<li>Follow the hyperlink</li>
<li>See nothing happens</li>
</ol>
<h2 dir="auto">Expected behaviour</h2>
<p dir="auto">The application should navigate to <a href="https://localhost:3000/pageThatUsesCssFromLibrary" rel="nofollow">https://localhost:3000/pageThatUsesCssFromLibrary</a> and display its content properly.</p>
<h2 dir="auto">Demo project that exhibits the phenomenon</h2>
<p dir="auto"><a href="https://doc-0g-7g-docs.googleusercontent.com/docs/securesc/t750r1ahgujh0pleo2f0qsr0gp3k3l5i/rbhhabhaoqpbmv50f5i2makv510bkai5/1537912800000/04958186454906229977/04958186454906229977/1ukNGvIzCwLXg-Gp_3sBdtHPVwZxiUMqq?e=download" rel="nofollow">Download demo project from Google Drive</a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: Mac OSX</li>
<li>Browser Chrome</li>
<li>Version of Next.js: 7.0.0</li>
</ul>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Next 7 - Router.push() does`t work.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">I have a search handler that should redirect to '/search' page from main page. But nothing happens.<br>
routeChangeError throws Route cancelled. But on Next 6.1.2. everything works fine.<br>
Also if I go to the link <a href="http://localhost:8080/search" rel="nofollow">http://localhost:8080/search</a> directly it works as expected, seems like a problem with client side routing. Using HOC withRouter gives the same results.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="handleSearch = (event, { suggestionValue }) =&gt; {
    if (suggestionValue.address_string === undefined) {
      return;
    }
    const newQueryParams = {
      // New search should always start from 1st page
      page: 1,
      // If search value is empty, it should send default search request
      address: isString(suggestionValue.address_string) ? suggestionValue.address_string : '',
    };
    Router.events.on('routeChangeError', (err) =&gt; {
        console.log(err)
    })
    if (Router.router.pathname === '/search') {
      Router.push({ pathname: '/search', query: { ...Router.router.query, ...newQueryParams } })
    } else {
      Router.push({ pathname: '/search', query: newQueryParams })
    }
  };"><pre class="notranslate"><span class="pl-en">handleSearch</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> suggestionValue <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">suggestionValue</span><span class="pl-kos">.</span><span class="pl-c1">address_string</span> <span class="pl-c1">===</span> <span class="pl-c1">undefined</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">const</span> <span class="pl-s1">newQueryParams</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
      <span class="pl-c">// New search should always start from 1st page</span>
      <span class="pl-c1">page</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span>
      <span class="pl-c">// If search value is empty, it should send default search request</span>
      <span class="pl-c1">address</span>: <span class="pl-en">isString</span><span class="pl-kos">(</span><span class="pl-s1">suggestionValue</span><span class="pl-kos">.</span><span class="pl-c1">address_string</span><span class="pl-kos">)</span> ? <span class="pl-s1">suggestionValue</span><span class="pl-kos">.</span><span class="pl-c1">address_string</span> : <span class="pl-s">''</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-v">Router</span><span class="pl-kos">.</span><span class="pl-c1">events</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'routeChangeError'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">err</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-v">Router</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span> <span class="pl-c1">===</span> <span class="pl-s">'/search'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-v">Router</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">pathname</span>: <span class="pl-s">'/search'</span><span class="pl-kos">,</span> <span class="pl-c1">query</span>: <span class="pl-kos">{</span> ...<span class="pl-v">Router</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-c1">query</span><span class="pl-kos">,</span> ...<span class="pl-s1">newQueryParams</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">else</span> <span class="pl-kos">{</span>
      <span class="pl-v">Router</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">pathname</span>: <span class="pl-s">'/search'</span><span class="pl-kos">,</span> <span class="pl-c1">query</span>: <span class="pl-s1">newQueryParams</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></pre></div>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Expected to work the same as in Next 6.1.2</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: Ubuntu 18.04</li>
<li>Version of Next.js: 7.0.0</li>
</ul>