CSS Module resolution conflict with dynamic import in production mode

[6220119]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

next info

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Wed Aug 10 14:28:23 PDT 2022; root:xnu-8020.141.5~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 14.20.0
      npm: 6.14.17
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 12.2.6-canary.5
      eslint-config-next: 12.2.5
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

Not relevant

How are you deploying your application? (if relevant)

next export (pages are statically generated, and deployed on a host, i.e. Github Pages)

Describe the Bug

The CSS Module resolved in production mode does not match with the development's.

Expected Behavior

At the minimum, the same output should be the same in development mode, so that we are not caught by surprise.

Link to reproduction

https://github.com/6220119/nextjs-css-module-dynamic-import-bug

To Reproduce

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

[6220119]

This is probably a different variant of these issues:

• CSS modules duplicated when used with next/dynamic #25456
• Inconsistent loading order of CSS Modules + global CSS #10148
• CSS Modules sometimes don't load when using next/dynamic import #33286
• CSS module styling is removed too early on route changes #17464

[MarcARoberge]

I am also having this issue. This bug is reproducible through the router but if I land directly on my page it works as intended.

[jonime]

We are also having this issue. This causes some weird style errors in our project 😞

[maerzhase]

also having this issue. pretty nasty

[Egor-Dubovik]

I have the same issue in next@13.5.6 even without dynamic imports. Seriously this problem has been going on for so long and it still hasn't been fixed?