[NEXT-684] Fast-refresh for CSS files is not working in Firefox
Problem
Verify canary release - [X] I verified that the issue exists in the latest Next.js canary release Provide environment information [code block] What browser are you using? (if relevant) _No response_ How are you deploying your application? (if relevant) _No response_ Describe the Bug So I just started a new next.js app using the `v13.0.5` with the experimental `app` folder. I noticed that CSS changes are not correctly updated in the browser. The browser is notified of the change, but the styles are not applied - if I manually refresh the browser I can see the correct styles. I also tried the canary version and the error still exists. Moving to `v13.0.4` seems to work fine. And I also tried with Tailwind following the beta documentation and also it doesn't work. Expected Behavior Updating styles should fast refresh and update the page with the new styles. Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster https://stackblitz.com/edit/vercel-next-js-viybne?file=app/global.css To Reproduce Open the `global.css` file, change the colors and save the file. You can see it working with the 13.0.4: https://stackblitz.com/edit/vercel-next-js-6sncvk?file=app/global.css <sub>NEXT-684</sub>
Error Output
error still exists. Moving to `v13.0.4` seems to work fine.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix CSS Fast Refresh Issue in Next.js v13.0.5 for Firefox
The fast refresh mechanism in Next.js v13.0.5 has a bug that prevents CSS changes from being applied in Firefox. This is likely due to how the CSS module updates are handled in the browser, causing the styles to not reflect changes until a full page reload occurs. The issue does not exist in v13.0.4, indicating a regression in the newer version.
Awaiting Verification
Be the first to verify this fix
- 1
Revert to Stable Version
Downgrade your Next.js version to v13.0.4 to restore the expected CSS fast refresh functionality.
bashnpm install next@13.0.4 - 2
Report the Issue
Create a detailed issue report on the Next.js GitHub repository to inform the maintainers about the regression in v13.0.5. Include reproduction steps and environment details.
markdownhttps://github.com/vercel/next.js/issues/new - 3
Monitor for Updates
Keep an eye on the Next.js release notes and GitHub issues for any patches or updates related to this issue. Upgrade to a fixed version once available.
markdownhttps://github.com/vercel/next.js/releases - 4
Test in Different Browsers
Verify the CSS fast refresh functionality in other browsers (e.g., Chrome, Edge) to confirm that the issue is isolated to Firefox and the specific version of Next.js.
markdownOpen your application in different browsers and test CSS changes.
Validation
After reverting to v13.0.4, make a change in the global.css file and save it. The styles should update in the browser without requiring a manual refresh. If the issue persists in v13.0.5, confirm by testing in Firefox and checking the console for any errors.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep