-
Notifications
You must be signed in to change notification settings - Fork 26.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[v13] css modules not carried with dynamic imports #44994
Comments
Hello, Here is another example of reproducing a similar bug (dynamic import + css modules). 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. Is there a specific configuration to solve this problem? If anyone from the Next team passes by... |
Is there any update about this issue? I think it's quite urgent to fix this |
Can confirm the issue on 13.1.3 - 13.1.6. The only way to overcome this is to put tl;dr |
Any update on this? |
@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) |
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. |
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. |
Any workaround for this? still happening on 13.4.2 |
Also subject to this.
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.
tldr if you're using a loading.tsx in your route, try it without |
Adding 'use client' to the top of dynamic import in either the component or consuming page does not solve. |
@lucchev have you found any solution for this? |
The same problem happens to me with pages directory and css modules in next@14.2.3 |
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 How much long should we wait for a fix? |
Could it be this one is also getting picked up here? #68396 |
@joaogarin Can you share a repro? I couldn't reproduce this issue on v14.2.3. |
Verify canary release
Provide environment information
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
Create a component with an import to a css modules file.
No matter what the context (in a
page.tsx
, etc...), load this component withawait 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
The text was updated successfully, but these errors were encountered: