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)
- Load the Home page (
/
route). - Observe that the "Blue" and "Red" buttons are displayed correctly.
- Click Go to Contact page.
- Observe that the Contact page is displayed properly with the base (grey) button.
- Click Go to Home page.
- ❌
[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>
- Blue and Red buttons become "grey", due to CSS overriding from a newly added
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 ofcss-loader
)