Thanks to visit codestin.com
Credit goes to github.com

Skip to content

CSS Module Hot Reloading Issue in Next.js Dev Mode #74749

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.

Sign up for GitHub

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

Jump to bottom
Open
Raoufbaa opened this issue Jan 10, 2025 · 15 comments
Open

CSS Module Hot Reloading Issue in Next.js Dev Mode #74749

Raoufbaa opened this issue Jan 10, 2025 · 15 comments
Labels
CSS Related to CSS.

Comments

@Raoufbaa
Copy link

Raoufbaa commented Jan 10, 2025 •
edited
Loading

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/unruffled-rui-xqj4ys

Issue Description:

I encountered an issue with CSS modules in my Next.js project when working in development mode. When I modify CSS properties in a CSS module and save the file, the styles do not update as expected in the browser. Instead, the following error is thrown in the console:

Error: No link element found for chunk static/chunks/src_components_fb4138._.css
    at http://localhost:3000/_next/static/chunks/_d95469._.js:1595:28
    ...

To Reproduce

1- Create a component that imports a CSS module:
import styles from './drawingcanvas.module.css';
2- Modify any CSS property in the CSS module while running the Next.js app in development mode (next dev).
3- Observe that the styles do not update in the browser, and the following error appears in the console:
Error: No link element found for chunk static/chunks/[...].css
4- Manually reload the page to apply the changes.

Current vs. Expected behavior

Expected Behavior:
CSS modules should hot reload, and the updated styles should be reflected in the browser without requiring a manual page reload.

Actual Behavior:
CSS changes in the module do not take effect, and the browser throws an error until the page is manually reloaded.

Workaround:
I resolved this issue by moving the CSS module import from the child component (Canvas component) to its parent component. I then passed the styles object as a prop to the child component. Example:

Parent Component:

import styles from './drawingcanvas.module.css';

export default function ParentComponent() {
  return <CanvasComponent styles={styles} />;
}

Child Component:

export default function CanvasComponent({ styles }) {
  return <div className={styles.canvasContainer}>Canvas</div>;
}

This workaround fixed the issue, and the CSS changes hot-reloaded correctly in development mode. However, this introduces extra coupling between components and may not be an ideal solution.

Provide environment information

Next.js version: 15.1.4
Node.js version: 20.17.0.
Browser: arc browser version 1.36.1 with chromium engine 131.0.6778.265
OS: windows 11 21h2 build 22000.556

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

Not sure, Developer Experience

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

next dev (local)

Additional context

No response
@Raoufbaa Raoufbaa added the bug Issue was opened via the bug report template. label Jan 10, 2025
@samcx samcx added CSS Related to CSS. and removed Developer Experience bug Issue was opened via the bug report template. labels Jan 22, 2025
@ColdDev
Copy link

ColdDev commented Feb 4, 2025

Yep, this bug is also affecting my development environment on the latest version of Next.js (15.1.6). This is getting pretty annoying now, as every single CSS change results in this. Are there any workarounds that can be advised for the time being?

@Raoufbaa
Copy link
Author

Raoufbaa commented Feb 5, 2025

Yep, this bug is also affecting my development environment on the latest version of Next.js (15.1.6). This is getting pretty annoying now, as every single CSS change results in this. Are there any workarounds that can be advised for the time being?

For now, I haven't found a workaround, and it's getting pretty annoying to reload the page every time to apply changes.

@ColdDev
Copy link

ColdDev commented Feb 8, 2025

Yep, this bug is also affecting my development environment on the latest version of Next.js (15.1.6). This is getting pretty annoying now, as every single CSS change results in this. Are there any workarounds that can be advised for the time being?

For now, I haven't found a workaround, and it's getting pretty annoying to reload the page every time to apply changes.

Totally agree. I'm confused as to why this has not had more attention to. Surely we cannot be the only two people having this issue??

@Raoufbaa
Copy link
Author

Yep, this bug is also affecting my development environment on the latest version of Next.js (15.1.6). This is getting pretty annoying now, as every single CSS change results in this. Are there any workarounds that can be advised for the time being?

For now, I haven't found a workaround, and it's getting pretty annoying to reload the page every time to apply changes.

Totally agree. I'm confused as to why this has not had more attention to. Surely we cannot be the only two people having this issue??

Totally agree

@haykodarb
Copy link

Also facing this issue, when modifying CSS files it doesn't reload correctly and throws

Module not found: Can't resolve './page.module.css'

on a very barebones NextJS project.

@ColdDev
Copy link

ColdDev commented Feb 27, 2025

Also facing this issue, when modifying CSS files it doesn't reload correctly and throws

Module not found: Can't resolve './page.module.css'

on a very barebones NextJS project.

Are you using Turbopack? I was using Turbopack and removing this argument fixed the issue. Slightly annoying as Turbopack is supposed to be the faster option, but it works now.

@j8seangel
Copy link

I'm facing the same issue in a nx monorepo setup since I updated to next 15 and start using turbopack.

Are you using Turbopack? I was using Turbopack and removing this argument fixed the issue. Slightly annoying as Turbopack is supposed to be the faster option, but it works now.

@ColdDev which argument?

@j8seangel j8seangel mentioned this issue Mar 3, 2025
Merged
@ColdDev
Copy link

ColdDev commented Mar 4, 2025

I'm facing the same issue in a nx monorepo setup since I updated to next 15 and start using turbopack.

Are you using Turbopack? I was using Turbopack and removing this argument fixed the issue. Slightly annoying as Turbopack is supposed to be the faster option, but it works now.

@ColdDev which argument?

In your package.json, if you have enabled Turbopack, I think the option will be within your options for start and dev?

@muhsen-albashaireh
Copy link

muhsen-albashaireh commented Apr 3, 2025 •
edited
Loading

Any updates on this issue? This works with me when Turbopack is disabled, however, I'm checking if there's a workaround to the issue while Turbopack is enabled.

@j8seangel
Copy link

Same for me, not working with turbopack

@eremenko1

This comment has been minimized.

Sign in to view
@on3dd

This comment has been minimized.

Sign in to view
@Raoufbaa
Copy link
Author

Any updates on this issue? This works with me when Turbopack is disabled, however, I'm checking if there's a workaround to the issue while Turbopack is enabled.

nope the issue still

@nabilfatih
Copy link

got the same problem, see image

Image

@eremenko1

This comment has been minimized.

Sign in to view
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS Related to CSS.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@j8seangel @samcx @on3dd @haykodarb @eremenko1 @muhsen-albashaireh @nabilfatih @ColdDev @Raoufbaa