Next.js: Links to some pages are hanging on navigation with `next-css` plugin

[tannerlinsley]

Bug report

When attempting to navigate to some pages with a simple <Link href='...'/>, the page hangs and things break.

• Go to https://nozzleio-8f0sjfbt1.now.sh/
• Navigate around using the top nav bar
• Go to the footer and click on the three links that contain "API Docs"
• Observe the console and network tab

Expected behavior

The navigation should succeed.

System information

• OS: macOS
• Browser: Chrome
• Version of Next.js: 9@latest

More Information

The repo for this website can be found at https://github.com/nozzle/nozzle.io on the master branch.

[ijjk]

Hi, this is most likely related to a bug in next-css where if you import CSS in a page instead of _app the loading of the page hangs. Moving the CSS import for import 'swagger-ui-react/swagger-ui.css' from pages/docs/api.js to pages/_app.js should resolve the hanging.

Note: the mentioned next-css bug is being investigated/discussed

[timneutkens]

Specific issue @ijjk is referencing is https://github.com/zeit/next-plugins/issues/282

[zackkrida]

Wow, this is an absolutely brutal issue.

FYI if anyone has an issue where route changes via <Link /> components and the imperative Router load the correct code chunk without error but the route simply doesn't change, this might be a likely cause.

[timneutkens]

It'd help if you provide a reproduction @zackkrida.

[zackkrida]

Hi @timneutkens Here's an extremely small reproduction:

https://next-css-bug.zackkrida.now.sh

The <Link /> on the homepage points to a page with an included css file import '../test.css'. That link doesn't work. The correct page and chunk are prefetched but the page doesn't render and the url doesn't update.

If you visit the linked page _first_: https://next-css-bug.zackkrida.now.sh/has-css _then_ use the <Link /> on the page to havigate to home and back, both links work.

Here's the source if you need it, thank you! Next and zeit are both fantastic.

https://github.com/zackkrida/next-css-bug

[zackkrida]

And @timneutkens it's definitely this issue: zeit/next-plugins#282
I was only commenting to share the specific behavior because it took me a long time to find this issue. Thanks!

[Timer]

Closing as this is fixed when switching to Next.js' new build-in CSS support.

[avin-kavish]

@Timer I don't know about that, routes are still hanging even with built-in support.

[Timer]

@avin-kavish we have extensive integration tests ensuring they do not. If you're able to reproduce, please provide a demo and we can fix it ASAP.

It's likely that something else is misconfigured, or you're still using @zeit/next-css.

[avin-kavish]

@Timer maybe it's something else, can you give me any common scenarios to lookout for? I'm not sure how to debug this without any sort of feedback. Nothing on the console, no network calls, but server cli says building the page and stops there. Does next support DEBUG=... or something similar?

[Timer]

Unfortunately, there's no advice we can give without you providing a full demo.