next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Published 20 hours ago • verified publisher icon vercel

Next 13 CSS modules support doesn't load stylesheets from client components

Open LlewVallis opened this issue 2 years ago • 2 comments

Verify canary release

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

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: Ubuntu 20.04.0 LTS Fri Oct 28 2022 16:34:05 GMT+1000 (Australian Eastern Standard Time)
Binaries:
  Node: 16.14.2
  npm: 7.17.0
  Yarn: 1.22.19
  pnpm: 7.13.6
Relevant packages:
  next: 13.0.1-canary.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Firefox Developer Edition 106.0b8

How are you deploying your application? (if relevant)

next dev

Describe the Bug

A client component is created with the "use client" directive in the app directory. This client component uses a .module.css file to (attempt) to color the contents of a span red. Although the class name is generated and applied to the element, the corresponding stylesheet is never loaded. If the "use client" directive is removed, everything works correctly.

Expected Behavior

The stylesheet should be loaded the the contents of the span should be displayed in red.

Link to reproduction

https://stackblitz.com/edit/vercel-next-js-wfksse?file=app/Client.jsx

To Reproduce

  1. Create a new next project.
  2. Delete pages.
  3. Enable the app directory in the config.
  4. Use a standard layout.jsx:
export default function RootLayout({
  children,
}) {
  return (
    <html lang="en">
      <head></head>
      <body>
        {children}
      </body>
    </html>
  );
}
  1. Use this page.jsx:
import Bar from "./Bar";

export default function Page() {
    return <Bar />;
}
  1. Create a file named app/Bar.jsx with this content:
"use client";

import styles from "./Bar.module.css";

export default function Bar() {
    return <span className={styles.bar}>Hello, World!</span>
}
  1. Finally, create a file named app/Bar.module.css with this content:
.bar {
    color: red;
}

Now run npm dev or npm build && npm start to observe the bug.

LlewVallis avatar Oct 28 '22 06:10 LlewVallis

Workaround: importing the stylesheet from a different file that isn't a client component, such as layout.jsx, seems to fix the issue.

LlewVallis avatar Oct 28 '22 06:10 LlewVallis

Duplicate #41791

Dwlad90 avatar Oct 28 '22 07:10 Dwlad90

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.

github-actions[bot] avatar Nov 28 '22 00:11 github-actions[bot]