Open gonshi opened 9 months ago
It seems to work correctly if I downgrade the version of next.js to 13.2
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
It would be really helpful.
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.
https://github.com/vercel/next.js/issues/51162#issuecomment-1808078220
Edit: I have tested it with Next v 13.2, then it works.
I have spent some time narrowing this issue down. Two things are needed for this to happen:
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
.
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!
Any update on this so far?
Edit by maintainers: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!
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
.
Same problem here on next@14.0.4
Any changes inside a stylesheet module file (any.module.scss) will cause a page reload.
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.
Link to the code that reproduces this issue
https://github.com/vercel/next.js/tree/canary/packages/create-next-app
To Reproduce
Install Next.js app by
npx create-next-app@latest
Select each options for installation like this.
Update![ezgif-2-fd370fc814](https://github.com/vercel/next.js/assets/5787175/37cc2087-ef30-4da2-9c39-6505ba97377a)
app/page.module.css
and it triggers full reload instead of fast refresh like thisCurrent vs. Expected behavior
It should trigger fast refresh when I edit css modules. Actually, the following cases execute fast refresh correctly.
App Router
at the install.Verify canary release
Provide environment information
Which area(s) are affected? (Select all that apply)
App Router, CLI (create-next-app)
Additional context
No response