[v13] css modules not carried with dynamic imports

[y-nk]

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:06:26 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T8112
Binaries:
  Node: 18.12.1
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: 7.24.3
Relevant packages:
  next: 13.1.2
  eslint-config-next: 13.1.2
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-laxqe1?file=next.config.js,components/hello-world/style.module.css,components/hello-world/index.tsx,app/%5Bslug%5D/page.tsx

To Reproduce

1. Create a component with an import to a css modules file.

2. No matter what the context (in a page.tsx, etc...), load this component with await import()

Describe the Bug

The styles aren't injected in the page

---

Note: if we use a classic import, of course, styles are injected.

Expected Behavior

The styles should be injected in the page

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[lucchev]

Hello,

Here is another example of reproducing a similar bug (dynamic import + css modules). https://stackblitz.com/edit/vercel-next-js-clzexc?file=app/PageDynamicContent.tsx

You can see the flashing of the fourth block using CSS modules.

The CSS code of the CSS module is not linked in the html page (link tag) in this case of dynamic import. It is injected afterwards by JavaScript.

Is there a specific configuration to solve this problem? If anyone from the Next team passes by...

[rafalwawrzyk]

Is there any update about this issue? I think it's quite urgent to fix this

[SzymonGalazka]

Can confirm the issue on 13.1.3 - 13.1.6. It happens when using next/dynamic with React Component - the styles are never downloaded. On 13.1.2 however, the styles are always downloaded. The expected behaviour is styles should be downloaded when the component is actually used.

The only way to overcome this is to put use client on top of the file that is rendering those dynamic components - then the styles are downloaded dynamically as well. It results in Flash of Unstyled Content and you lose all benefits of Server Components.

tl;dr next/dynamic + CSSmodules are not working properly without the 'use client' annotation.

[rafalwawrzyk]

Any update on this?

[y-nk]

@rafalwawrzyk in case your use-case is to load mdx with styling and everything, i've built a repo which has SSG mdx support with css modules which you can find here https://github.com/y-nk/reblog (it works by not using @next/mdx and not loading dynamically mdx with await import, but rather setting working webpack loaders which won't break the chain of dynamic imports)

[ArthurClemens]

I am seeing a similar FOUC when using a server component that imports styles from a CSS module. It happens always when the page is fetching new (uncached) data, but it can also happen randomly on other server pages. The CSS is being attached to the head only after loading is completed.

A workaround is to move these CSS module styles to global.css, but that negates the whole idea of CSS modules.

[kennstenicht]

You can mark you component as client with 'use client' to fix the problem. The component will still be pre-prendered on the server, but get hydrated on the client, which will injects the styles correctly.

[SimonPrato11]

Any workaround for this? still happening on 13.4.2

[justrealmilk]

Also subject to this.

• Hard navigation applies both class names to elements and includes the appropriate stylesheets.
• Client-side navigation applies class names and doesn't inject the stylesheets.

All my problems just went away when I stopped using loading.tsx (simply renamed the file and pushed to prod).

I've been racking my brain over this for well over a day and there's scattered issues, many closed yet unresolved. I found no useful information. More than once I found threads that ended in "I found the problem and fixed it." with no further explanation.

Route (app)                                Size     First Load JS
┌ ○ /                                      2.98 kB         157 kB
├ ○ /_not-found                            0 B                0 B
├ ○ /about                                 1.15 kB        84.2 kB
├ λ /api/draft                             0 B                0 B
├ ○ /archive                               1.38 kB         122 kB

the below route had a **loading.tsx** in place
removing it solved my issue ✨ magically ✨

├ λ /archive/[slug]                        3.98 kB         167 kB
├ ○ /blog                                  1.83 kB         165 kB
├ λ /blog/entry/[slug]                     2.04 kB         165 kB
└ λ /blog/tag/[slug]                       1.83 kB         165 kB
+ First Load JS shared by all              78 kB
  ├ chunks/769-235d6e9006e8763d.js         25.3 kB
  ├ chunks/bce60fc1-11e09f10ab51e4dd.js    50.5 kB
  ├ chunks/main-app-07b543d776735cff.js    221 B
  └ chunks/webpack-a22ce3d7166339ba.js     1.92 kB

"dependencies": {
    "autoprefixer": "10.4.14",
    "classnames": "^2.3.2",
    "eslint": "8.44.0",
    "eslint-config-next": "13.4.8",
    "framer-motion": "^10.12.18",            // me
    "luxon": "^3.3.0",                       // me
    "next": "13.4.8",
    "next-plausible": "^3.9.1",              // me
    "postcss": "8.4.24",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-markdown": "^8.0.7",              // me
    "react-syntax-highlighter": "^15.5.0",   // me
    "tailwindcss": "3.3.2",                  // i don't use this but scared to remove it
    "typescript": "5.1.6",
    "@types/luxon": "^3.3.0",
    "@types/node": "20.4.0",
    "@types/react": "18.2.14",
    "@types/react-dom": "18.2.6",
    "@types/react-syntax-highlighter": "^15.5.7"
  }

tldr if you're using a loading.tsx in your route, try it without

[cheryl-c-tirerack]

Can confirm the issue on 13.1.3 - 13.1.6. It happens when using next/dynamic with React Component - the styles are never downloaded. On 13.1.2 however, the styles are always downloaded. The expected behaviour is styles should be downloaded when the component is actually used.

The only way to overcome this is to put use client on top of the file that is rendering those dynamic components - then the styles are downloaded dynamically as well. It results in Flash of Unstyled Content and you lose all benefits of Server Components.

tl;dr next/dynamic + CSSmodules are not working properly without the 'use client' annotation.

Adding 'use client' to the top of dynamic import in either the component or consuming page does not solve. I am weeks into this project and this bad user experience on the front end is a deal breaker.

[RisingGeek]

Hello,

Here is another example of reproducing a similar bug (dynamic import + css modules). https://stackblitz.com/edit/vercel-next-js-clzexc?file=app/PageDynamicContent.tsx

You can see the flashing of the fourth block using CSS modules.

The CSS code of the CSS module is not linked in the html page (link tag) in this case of dynamic import. It is injected afterwards by JavaScript.

Is there a specific configuration to solve this problem? If anyone from the Next team passes by...

@lucchev have you found any solution for this?

[joaogarin]

The same problem happens to me with pages directory and css modules in next@14.2.3

[nitroo88]

I have the same problems. First entry for a website is ok, but when I'm switching the page it will generate content without any styles. I'm working on next start command, because with next dev it works correctly.

How much long should we wait for a fix?

[joaogarin]

Could it be this one is also getting picked up here? https://github.com/vercel/next.js/pull/68396

[devjiwonchoi]

@joaogarin Can you share a repro? I couldn't reproduce this issue on v14.2.3. x-ref: https://github.com/devjiwonchoi/repro-next-44994