HMR doesn't work in server component with <Link> or/and <Image> when css.module is imported.

[Enkratia]

Link to the code that reproduces this issue

https://github.com/Enkratia/css-reload-show

To Reproduce

1. npm i
2. npm run dev
3. comment/uncomment any css property in file: src/app/components/component/component.module.scss
4. see full page reload

Current vs. Expected behavior

currently - HMR doesn't work with scss module when server compoennt contains or components
expected bahaviour = opposed behaviour

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home Single Language
Binaries:
  Node: 20.10.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.2
Next.js Config:
  output: standalone

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

create-next-app

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

next dev (local)

Additional context

**This problem persist more than one year.
**One of the opened dicussions: #57046

**Actually my Operating System is Linux MInt 22 Cinnamon Edition x64, but when i use: "npx --no-install next info", - i am getting an error: "npm ERR! npx canceled due to missing packages and no YES option: ["[email protected]"]"

** node version: v21.7.2

[samcx]

@Enkratia I can confirm this is still an issue.

It looks like this isn't an issue when you use Turbopack (next dev --turbo). Have you tried using that instead?

[Enkratia]

@samcx Thank you for response. Maybe, but in real world project i am getting too much errors when i use turbopack, and these errors are incompatible with next.js docs (and what is done with webpack). So i wish to use webpack atm.

[samcx]

@Enkratia which version of Next.js are you using?

[Enkratia]

@samcx "next": "^14.2.4".

[samcx]

@Enkratia Are you able to upgrade to the latest (canary) and/or React 19? But even with 14.2.4, all the dev tests were passing in , so curious what errors you were seeing.

[Enkratia]

@samcx i will write some of the errors here (in 12-24 hours).

• Are you able to upgrade to the latest (canary): yes.
• and/or React 19?: no (curent versions: "react": "^18.3.1", "react-dom": "^18")

[Enkratia]

@samcx i'm sorry for delay.

First two errors:

1. When i add minimumCacheTTL: 31540000000 to nextConfig.images it gives an error:

• invalid value: integer 31540000000, expected u32 at line 54 column 34] {
  code: 'GenericFailure'

** Yes, minimumCacheTTL is not needed in dev mode, so i can just create 2 different next.config.mjs (for dev/prod mode), but this is working with webpack without any problems.
** minimumCacheTTL: 3154000000 is working fine (one zero less).
** It might be related to BigInt.

2. When i add icon.ico in app (as it is written here https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons) - i get this error:

Processing image failed
unable to decode image data

Caused by:

• Format error decoding Ico: The PNG is not in RGBA format!
• The PNG is not in RGBA format!

** New repro: https://github.com/Enkratia/css-reload-show-2
** This is the same repro as above, but with next changes:

• added "dev:turbo": "next dev --turbo", to package.json.
• added icon.ico to app directory.
• added minimumCacheTTL: 31540000000 to nextConfig.images (in next.config.mjs).

[samcx]

@Enkratia Good finds! Is it possible to also submit a new 🐛 via the bug report so we I can share this with the Turbopack team?

[Enkratia]

@samcx yes, i will try to make new report in 3-24 hours.

[Enkratia]

@samcx new report is submitted: #69330

[Enkratia]

@samcx thank you, solution is to use turbopack, no more errors right now.

[github-actions]

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