Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS module removed when navigating pages that contain the same next/dynamic component

See original GitHub issue

Bug report

Describe the bug

Components that use next/dynamic to load and that have a CSS module lose their CSS when navigating to another page that contains the same dynamically loaded component.

To Reproduce

Here is a repo that contains the minimal amount of code to reproduce.

Create a Component that includes a CSS module.
Create two pages.
Using next/dynamic add the component to each page, as well as add a link to the other page.
Start the app and view the first page and then click the link to the second page.

Expected behavior

The styles for the dynamically included component will persist when navigating to other pages the component lives on.

Screenshots

The styles for the dynamically included component do not persist when navigating to other pages the component lives on.

System information

OS: macOS
Browser: Chrome
Version of Next.js: 9.5.3
Version of Node.js: 12

Additional context

This issue only occurs when navigating via page links, direct access to the index or other-page load the CSS correctly.

This bug appears to have been introduced as a regression from #12843 that fixed a related issue, #10557, where there is a flash of unstyled content when navigating to a page that contains a dynamically loaded component. I verified that this new issue is not present in 9.5.3-canary.20, but is present on 9.5.3-canary.21 and is currently present in 9.5.3. See this comment thread for more details on potential solutions.

Issue Analytics

State:
Created 3 years ago
Reactions:4
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

Gr0mcommented, Sep 10, 2020

Same (or maybe similar/related) problem. I’m using “next-page-transitions” package in _app.tsx to make page transitions. With every page transition, parts of CSS (I’m using css modules) are removed immediately (instead of waiting for transition to finish) and the page looks really weird for transition duration.

Forgot to say that this is happening only on production. And it doesn’t happen on 9.5.2.

1reaction

diegoleftcommented, Sep 8, 2020

Same problem here Next version 9.5.3

Top Results From Across the Web

Built-in Components - Nuxt

To navigate between pages of your app, you should use the <NuxtLink> component. This component is included with Nuxt and therefore you don't...

Failed to fetch dynamically imported module" on Vue/Vite ...

In my case the error was caused by not adding .vue extension to module name. import MyComponent from 'components/MyComponent'.

Nuxt.js cheat sheet - Christopher Kade

Documentation, including nested routes and dynamic nested routes. Navigating to a route in a component template. Inside of any of your components: 1//...

What You Should Know about Code-Splitting with Nuxt.js

Learn how code-splitting works in Nuxt, why you should care and how you can implement it in your Vue apps.

Simple Server Side Rendering, Routing, and Page Transitions ...

If you need to add CSS files, fonts, or the like, we would use this Nuxt.js config file to do so. Now that...