CSS chunk loaded in a script tag (CSS modules)

Why this is a good first issue

CSS module chunking issue requires Webpack and CSS module expertise.

AI Summary

The issue involves CSS modules being incorrectly chunked and loaded as scripts, causing client-side errors. The problem appears to be related to Webpack's module resolution and CSS handling. The scope is somewhat clear but requires deep understanding of Webpack and CSS modules, and there is a version mismatch that complicates the issue.

Issue Description

Link to the code that reproduces this issue

https://github.com/maphe/css-module-reprex

To Reproduce

The issue is visible on the prod build:

visit https://css-module-reprex.vercel.app/test
the console will show the error: Uncaught SyntaxError: Unexpected token '.'
the dom will have css loaded as script: <script src="/_next/static/css/f2515c4387c9bb9d.css" async=""></script>

To "reproduce" locally:

npx nx build css-module-reprex --prod --skip-nx-cache
look into .next/static/css
there should be one stylesheet instead of 2

Current vs. Expected behavior

The CSS being chunked into 2 makes the app loads the second chunk as a script for some reason, hence the client component style is broken. There should only be one stylesheet loaded (or at least the second one shouldn't be inserted as a script)

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:03:11 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6020
  Available memory (MB): 16384
  Available CPU cores: 12
Binaries:
  Node: 20.7.0
  npm: 10.1.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.7 // An outdated version detected (latest is 15.0.3), upgrade is highly recommended!
  eslint-config-next: 14.2.16
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.3
Next.js Config:
  output: N/A
 ⚠ An outdated version detected (latest is 15.0.3), upgrade is highly recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) are affected? (Select all that apply)

Module Resolution, Webpack

Which stage(s) are affected? (Select all that apply)

next build (local), Vercel (Deployed)

Additional context

After investigation, I noticed that the cause of the issue is having the

GitHub Labels

bugWebpackModule Resolution