search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.94k stars 26.87k forks source link

CSS Module resolution conflict with dynamic import in production mode #40080

Open 6220119 opened 2 years ago

6220119 commented 2 years ago

Verify 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

https://user-images.githubusercontent.com/1059583/187365088-afe7065c-d6a9-4efa-a1d0-fe82c17b7029.mp4

6220119 commented 2 years ago

This is probably a different variant of these issues:

MarcARoberge commented 2 years ago

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 commented 1 year ago

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

maerzhase commented 1 year ago

also having this issue. pretty nasty

Egor-Dubovik commented 11 months ago

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?