Updating CSS Modules always triggers full reload

[gonshi]

Link to the code that reproduces this issue

https://github.com/vercel/next.js/tree/canary/packages/create-next-app

To Reproduce

1. Install Next.js app by npx create-next-app@latest
2. Select each options for installation like this.

3. Update app/page.module.css and it triggers full reload instead of fast refresh like this
   

Current vs. Expected behavior

It should trigger fast refresh when I edit css modules.
Actually, the following cases execute fast refresh correctly.

1. When I edit a native css file (like global.css)
2. When I didn't choose App Router at the install.

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.0.0
Binaries:
  Node: 18.11.0
  npm: 10.2.1
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 13.5.6
  eslint-config-next: 13.5.6
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

App Router, CLI (create-next-app)

Additional context

No response

[gonshi]

It seems to work correctly if I downgrade the version of next.js to 13.2

[Shubhdeep12]

Ideally, this should not happen in production because hot module reload works for the development environment.
Correct? @balazsorban44

Can you give some insights here on this module-specific CSS files @balazsorban44

• what is the reason for the hot reload of module-specific CSS files?
• And where I can find this logic and flow in the codebase?

It would be really helpful.

[Skippou]

It may be related to my issue.

Editing any tailwind class or editing the global.css causes a hard reload if a CSS file is imported into the layout.tsx.

#51162 (comment)

Edit: I have tested it with Next v 13.2, then it works.

[Celsiusss]

I have spent some time narrowing this issue down. Two things are needed for this to happen:

• Use CSS modules
• Use the Link component from next/link

Example component where this happens:

import Link from "next/link";
import styles from "./page.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <p>main page</p>
      <Link href="/sub" />
    </div>
  );
}

Editing page.module.css will trigger a full reload.

Here is a minimal reproduction example: https://github.com/Celsiusss/next-css-reload-repro
Using next@canary.

[oelbaga]

I've had this bug for months and I finally figured out what causes this!! but there's still no fix. It happens if you have a css module file in a server component.

If you convert the component or page using the css module file to a client component with 'use client' and then go back to the module css file and save the smooth hot reload will work again.

This is very frustrating because I have many server components that use css modules that I don't necessarily want to convert to client components.

This bug really slows down productivity for those who use CSS modules with server components!

[eduardpauliuc]

I have spent some time narrowing this issue down. Two things are needed for this to happen:

• Use CSS modules
• Use the Link component from next/link

Editing page.module.css will trigger a full reload.

Here is a minimal reproduction example: https://github.com/Celsiusss/next-css-reload-repro Using next@canary.

Ran into the same issue. Image component from next/image also triggers the full page reload, even on a new app created with npx create-next-app@latest.

[hiranaguiar]

Same problem here on [email protected]

Any changes inside a stylesheet module file (any.module.scss) will cause a page reload.

[sleepdotexe]

Any updates from the team on this one? Been encountering the same issue here across multiple projects for quite a while now. It seems to be a pretty long-standing issue, and it's a serious productivity killer – especially on slower machines or when a route requires network calls each time it loads.

[Enkratia]

Maybe it will be helpful for someone: renaming of any image (in /public) is helping to get HMR back (temporally)

[samcx]

Hi everyone—

I can confirm this is still an issue with Webpack HMR.

Have you folks tried using Turbopack instead (highly recommend at this point as dev is passing all tests). With Turbopack (next dev --turbo), this is not an issue.

[pmespresso]

--turbo worked for me. Will Turbopack eventually be rolled into the default next dev?