sass module stylings not applied on client components in nextjs13

[outdoteth]

Verify canary release

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

Provide environment information

Binaries:
  Node: 16.16.0
  npm: 8.11.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.0.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When I convert my server component to a client component, the styles fail to render.

The following example works:

import "MyComponent.module.scss";

export const MyComponent = () => {
   // stuff
}

But this example fails to render the styles:

"use client";

import "MyComponent.module.scss";

export const MyComponent = () => {
   // stuff
}

Expected Behavior

The styles should be applied on client components

Link to reproduction

closed source

To Reproduce

see above steps^

[jmikrut]

@outdoteth this is a duplicate of #41791.

Doing some testing myself, I've found that the problem is fixed in dev mode, but after building and serving (even having deployed to Vercel) a lot of my styles are still missing.

Seems like there's still some work to be done here?

[shuding]

Can you provide a more detailed reproduction, like a temporary repository?

[oelbaga]

I had this issue all day and I couldn't figure what was going on but I updated 13.0.0 to 13.0.1 canary and the issue was fixed. I believe 13.01 was released just a few hours ago.

[outdoteth]

This works after i bumped the version to 13.0.01.

From the release notes:

Fix css modules imports in client components: #42077

[jmikrut]

Hey @shuding — thanks for the follow-up. Yes, we are building the new Payload website in public, and it's all open-source.

https://github.com/payloadcms/website

You'll see on https://stage.payloadcms.com that lots of the CSS module stylesheets are missing, but developing locally, they're all there. The site is certainly 100% in progress right now so things are unfinished everywhere but this shows the reproduction steps.

I really appreciate your help here!

Edit: I think this was fixed recently, like, today. Because now when we deploy, all the styles are loaded properly! THANK YOU

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.