Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS chunk loaded in a script tag (CSS modules) #72480

Open
maphe opened this issue Nov 7, 2024 · 0 comments
Open

CSS chunk loaded in a script tag (CSS modules) #72480

maphe opened this issue Nov 7, 2024 · 0 comments
Labels
bug Issue was opened via the bug report template. Module Resolution Module resolution (CJS / ESM, module resolving) Webpack Related to Webpack with Next.js.

Comments

@maphe
Copy link

maphe commented Nov 7, 2024

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:

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

To "reproduce" locally:

  1. npx nx build css-module-reprex --prod --skip-nx-cache
  2. look into .next/static/css
  3. 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 opengraph-image.tsx file import from the library that contains the components.

import { getLauncherColor } from '@css-module-reprex/ui';

getting rid of this line in opengraph-image.tsx fixes the build.

@maphe maphe added the bug Issue was opened via the bug report template. label Nov 7, 2024
@github-actions github-actions bot added Module Resolution Module resolution (CJS / ESM, module resolving) Webpack Related to Webpack with Next.js. labels Nov 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Module Resolution Module resolution (CJS / ESM, module resolving) Webpack Related to Webpack with Next.js.
Projects
None yet
Development

No branches or pull requests

1 participant