Issue 1:
Bug report

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).

But as soon as one tries to navigate to the page that has the import statement (via client-side routing), nothing seems to happen.

Environment

Next.js 7

Development mode

withCSS plugin registered via

const withCSS = require('@zeit/next-css')

module.exports = withCSS({/* my next config */})

Bug description

My intention is to lazy load CSS file from third party library that resides in a folder within node_modes.

This is what I've done in /pages/pageThatUsesCssFromLibrary.js (see linked demo project below)

import 'rc-slider/dist/rc-slider.min.css';

That works fine when using server rendering, i.e. write http://localhost:3000/pageThatUsesCssFromLibrary into the browser's address bar and hit enter.

However, it does not work if I'm navigating to that page through client-side navigation, i.e. navigate to http://localhost:3000 and clicking a Link that navigates to the page:

Go to page

Clicking to the link does not appear to do anything (not even displaying an error message).

To Reproduce

Working example

Build the linked demo project

Write http://localhost:3000/pageThatUsesCssFromLibrary 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 server side

Example that exposes the reported bug

Build the linked demo project

Write http://localhost:3000 and hit Enter

Follow the hyperlink

See nothing happens

Expected behaviour

The application should navigate to https://localhost:3000/pageThatUsesCssFromLibrary and display its content properly.

Demo project that exhibits the phenomenon

Download demo project from Google Drive

System information

OS: Mac OSX

Browser Chrome

Version of Next.js: 7.0.0

Issue 2:
Bug report

Describe the bug

Next 7 - Router.push() does`t work.

To Reproduce

I have a search handler that should redirect to '/search' page from main page. But nothing happens.

routeChangeError throws Route cancelled. But on Next 6.1.2. everything works fine.

Also if I go to the link http://localhost:8080/search directly it works as expected, seems like a problem with client side routing. Using HOC withRouter gives the same results.

handleSearch = (event, { suggestionValue }) => {
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) => {
console.log(err)
})
if (Router.router.pathname === '/search') {
Router.push({ pathname: '/search', query: { ...Router.router.query, ...newQueryParams } })
} else {
Router.push({ pathname: '/search', query: newQueryParams })
}
};

Expected behavior

Expected to work the same as in Next 6.1.2

System information

OS: Ubuntu 18.04

Version of Next.js: 7.0.0