lean prism
Hi all, we're using Next 13 for Payload CMS' new site and found a strange bug. If we have a client component, by declaring 'use client' at the top of the component, our CSS modules stop working. CSS modules are only loaded if we do not declare use client.
Anyone else getting this?
fierce flax
Hi all, we're using Next 13 for Payload CMS' new site and found a strange bug. I...
Hey @lean prism , I'm experiencing the same issue here. I'm actually a Payload user myself so that might be the reason 
lean prism
Ahh awesome!
Well we are in the early phases and don't even have Payload connected at all. Just a vanilla Next app at this point so I don't think it's Payload
fierce flax
It was meant as a joke haha. Wouldn't expect anything bad from Payload at all. This seems to be an issue with Next 13. I couldn't find a solution myself so I just wait for stable SCSS modules support here
lean prism
RIP
Well, there goes our productivity. I'm gonna make a minimally reproducible repo and open an issue if one does not exist
fierce flax
Great, we're not alone
tiny wharf
Yes have the same issue, global css working only component css not loading.
The class names are generated correctly and if I check the cache the css files are there.
lean prism
what's weird is that in the Next 13 example, they are apparently not having this issue
looks like you can only import styles in layout or page, but not custom components
vital dawn
Ah
I was just about to open a help post on this
I am facing exactly the same issue. Component contains a useState and a css module
lean prism
yeah this is a show stopper for us
vital dawn
But it can't be serverside due to useState, but css breaks when client side mode is enabled
+1
lean prism
the whole point of css modules is to be able to scope css to a component
we will have ~100 of em, no way I'm gonna put all their styles in the parent page / layout
other than that though i'm pumped about this new stuff, really really wanna use it
tiny wharf
damn, facing the same problem. Hope this gets fixed soon, it makes life real difficult
lean prism
correction: makes life impossible š
tiny wharf
I was using css-modules and switched to tailwind since that works now š¦
tiny wharf
I was using css-modules and switched to tailwind since that works now š¦
are you migrating?
noble cape
I was using css-modules and switched to tailwind since that works now š¦
Tailwind always works because it just uses global.css
Alternatively you can also use styled-components
tiny wharf
Yes, I'm updating my site to the new Next 13
tiny wharf
Yes, I'm updating my site to the new Next 13
why don't you wait until this issue is resolved, it seems to be kind of a stretch to rewrite your whole styles just because bug like this. Just stay on 12 for now
I'm staying on 12 with my projects for now, i don't wanna switch 1 day after release, that just doesnt seem like a good idea, cause things like this happen lol
Well I wanted to update to tailwind since a long time, now I have the excuse for it š
Well, in that case, it's alright lol.
I've been doing the exact opposite lately, moving my projects away from tailwind
tiny wharf
yeah i'm not moving from css modules for sure
same, its annoying, i wonder how many other hidden bugs are there that imma find out about while rewriting....
I'm glad i found about this while just playing with 13
lean prism
me too but i moved a buncha stuff and im super pumped about 13 for sure
im like a kid that's gotta wait for christmas morning to open his presents
tiny wharf
hahaha exactly i love it as well!
really glad the vercel team is making web move forward like this
lean prism
me too. big supporter
tiny wharf
Yeah, Next 13 is fun, I struggled a little bit with contexts in it but now is alright.
lean prism
what'd you end up doing with context?
put them in a layout? or a shared component?
well
i guess that's a convo for another time and place rather than polluting this thread
tawny fox
yeah i'm not moving from css modules for sure
cuirous, do you have the css modules directly in the next ap
I am trying do a move from styled components to css modules, but we have our package in a npm private package. Next doesn't seem to allow components in node modules to import .module.scss files
which seems really terrible, if I have to package all components in the library to one single css file. I really dont want that..as not all components are iused
any good tips on a component library using css modules for next? or is it really the only way to have the components directly in next (with some yarn workspaces or lerna or things like that. would really like to avoid that)
crisp badger
I'm using a private package for shared components between my nextjs applications as well and there is no problem with CSS modules. I'm still on v12 though, and not using SCSS.
tiny wharf
I'm using a private package for shared components between my nextjs applications...
This issue is only with NEXT 13 and appDir structure usage
crisp badger
My point is, it works in 12, so if @tawny fox is on 13, that might be the problem, and otherwise it's unrelated to this issue.
tawny fox
sry yea didn't realise this was a thread specific to 13.
(I am on 12. and not really working for me the publising of the package, I can publish it, but either I publish as a single css file with all shared component (which I dont wnat) or next throws an error
I mean I am on 13 but not using any of the appdir features
winter flint
looks like this will be fixed in the next canary release