Skip to content

6220119/nextjs-css-module-dynamic-import-bug

Repository files navigation

Steps to reproduce

The Reproduction site is live at: https://6220119.github.io/nextjs-css-module-dynamic-import-bug/
at the time of writing, this issue is reproducible with next@canary (12.2.6-canary.5)

  1. Load the Home page (/ route).
  2. Observe that the "Blue" and "Red" buttons are displayed correctly.
  3. Click Go to Contact page.
  4. Observe that the Contact page is displayed properly with the base (grey) button.
  5. Click Go to Home page.
  6. [FAIL], Expect that the "Blue" and "Red" buttons are displayed correctly.
    • Blue and Red buttons become "grey", due to CSS overriding from a newly added <style> element,
      under the marker <noscript data-n-css=""></noscript>

Note

  • The issue doesn't happen if the Contact page is the first page loaded (at step 3, do a page refresh).
  • The issue also doesn't happen in local development (because style-loader is used in dev mode instead of css-loader)

Video capture

Screen.Recording.mp4

About

Annoying bug with NextJS dynamic import + CSS Module

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published