Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[appDir] Next.js can't pickup css imports from client components

See original GitHub issue

Verify canary release

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 Wed Oct 26 2022 00:58:23 GMT+0800 (China Standard Time)
Binaries:
  Node: 16.14.2
  npm: 7.17.0
  Yarn: 1.22.19
  pnpm: 7.13.6
Relevant packages:
  next: 12.3.2-canary.43
  eslint-config-next: N/A
  react: 18.3.0-next-fecc288b7-20221025
  react-dom: 18.3.0-next-fecc288b7-20221025

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When using experimental.appDir, Next.js can not pick the CSS import from React Client Components located under the app dir. Both CSS Modules and Global Stylesheets can’t work.

cc @shuding

Expected Behavior

The imported CSS should be collected, processed, and then bundled by Next.js.

Link to reproduction

https://stackblitz.com/edit/nextjs-4ur55n

To Reproduce

Open the reproduction from stackblitz attached above:

Issue Analytics

State:
Created a year ago
Reactions:23
Comments:19 (2 by maintainers)

Top GitHub Comments

3reactions

dmaynard24commented, Oct 27, 2022

I’m running into the same problem. CSS Modules styles aren’t working. Interestingly enough, the generated CSS classnames are still being appended to elements.

1reaction

controversialcommented, Nov 1, 2022

Never mind, it was my mistake @shuding 😅 Of course, I realized as soon as I went to start creating a reproduction. Thanks for being on top of it! ❤️

Top Results From Across the Web

Basic Features: Built-in CSS Support - Next.js

Next.js allows you to import CSS files from a JavaScript file. This is possible because Next.js extends the concept of import beyond JavaScript....

Advanced Features: `src` Directory - Next.js

Client side · Built-in CSS Support ... Absolute Imports and Module Path Aliases ... React Server Components · Switchable Runtime.

next.config.js: Introduction

Phases can be imported from next/constants : const { PHASE_DEVELOPMENT_SERVER } = require('next/constants') module.exports = (phase, ...

Advanced Features: Absolute Imports and Module Path Aliases

Configure module path aliases that allow you to remap certain import paths. ... pages/index.js import Button from 'components/button' export default ...

Blog - Next.js 13

Next.js 13 introduces layouts, React Server Components, and streaming in the app directory, as well as Turbopack, an improved image ...