KEMBAR78
CSS module removed when navigating pages that contain the same next/dynamic component · Issue #16950 · vercel/next.js · GitHub
Skip to content

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

@adamayres

Description

@adamayres

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.

  1. Create a Component that includes a CSS module.
  2. Create two pages.
  3. Using next/dynamic add the component to each page, as well as add a link to the other page.
  4. 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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions