Next.js: Client side navigation is broken after CSS import via withCSS from @zeit/next-css

[prinzdezibel]

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

1. Build the linked demo project
2. 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

1. Build the linked demo project
2. Write http://localhost:3000 and hit Enter
3. Follow the hyperlink
4. 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

[futjikato]

duplicate of #5264

[popuguytheparrot]

Same problem

[kylemh]

@timneutkens also getting this error. I'm very down to work together with you try to resolve this if you'd be willing to take me under your wing again Sunday or Monday late night.

Hard reloads resolve any import issues, but local development has been rough since many route switches result in related errors. Currently only shipping static builds, but I imagine this is problematic for any client-side loaded routing.

[dizlexik]

This issue cost me some serious time this morning. It was very difficult to track down the cause of this to the importing of a CSS file deep within my component structure. Clicking on links would just hang indefinitely with no errors or warnings so I was forced to comment out components bit by bit until I stumbled upon the one causing the issue, which was followed by more commenting until I determined that it was the CSS import line. Maybe whoever fixes this issue could also look into adding some sort of error reporting in this area so that this type of error doesn't fail silently.

[kylemh]

@dizlexik would love to see a reproduction. I end up with the following error:

[stepankuzmin]

Same here. Importing empty css in _app.js as temporary solution resolves this issue (see https://github.com/zeit/next.js/issues/5264#issuecomment-424000127)

[dizlexik]

To reproduce:

1. Pull down with-next-css example: yarn create next-app --example with-next-css with-next-css-app
2. Rename /pages/index.js to /pages/test.js
3. Create new /pages/index.js with the following:

import Link from 'next/link'
export default () => <Link href="/test"><a>Test</a></Link>

1. Run the example: yarn dev

For me the "Test" link does nothing when clicked.

[kylemh]

https://spectrum.chat/thread/2183fc55-236d-42cb-92b9-3ab10acc6303?m=MTUzODU2NDg2ODA2Mg==

Next team is aware and working on it! It's complex and will take time.

[popuguytheparrot]

Same here. Importing empty css in _app.js as temporary solution resolves this issue (see #5264 (comment))

Not working

[daveteu]

WOW, took me an entire day thinking something wrong is with my codes.... importing a css file works for me in _app.js

[timneutkens]

Duplicate of https://github.com/zeit/next-plugins/issues/282

[AmanAgarwal041]

you can checkout a fix for the client side css fix https://github.com/AmanAgarwal041/next-css-fix

[devuxer]

@AmanAgarwal041

Or just go with this confirmed workaround from @Dynogic:

make every page import some css.

I just tried sticking a CSS import into a header component that I use on every page, and it worked like a charm.

Edit

Well, upon further reading, sounds like this workaround is in fact not working for everyone. Worth a try until an official fix is ready, though.

[ntgussoni]

I can confirm that importing an empty CSS in _app.js fixes this for me.

[sunlee-newyork]

Same as @ntgussoni - one of my page-level components would load properly with an index.css import in a child component if I hit the page directly via URL with SSR, but if I navigate to that same page from anoterh route, that index.css prevented the page component from loading on the clientside.

I moved my global.css reference from and imported it inside _app.js, and now the page component is rendering on clientside correctly now.

[libasoles]

Importing the needed css from _app.js AND restarting the server worked for me.