Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
Global CSS file having hot reload issue in new NextJS update - 16.1.1 | GoodFirstPicks

Global CSS file having hot reload issue in new NextJS update - 16.1.1

vercel/next.js 5 comments 1mo ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeNext.jsTypeScriptReact

Why this is a good first issue

Hot reload issue with global CSS in Next.js 16.1.1.

AI Summary

The issue involves hot reload not functioning correctly for global CSS files in Next.js 16.1.1, requiring changes to be saved twice or not reflecting immediately. The problem seems related to Turbopack and CSS handling, and while a workaround exists (using `next dev --webpack`), the root cause needs investigation and a proper fix.

Issue Description

Link to the code that reproduces this issue

https://github.com/tanishqkrk/next.js

To Reproduce

npm install npm run dev

Current vs. Expected behavior

I created a new NextJS project with the latest flag. Usually my go it is reset the css file and start fresh, this time when I deleted some CSS code and saved the file it didn't hot reload the page, I thought it might've been a cache bug, cleared everything, restarted my server and my browser, did a dozen things, it didn't work.

The hot reload was either only working when any file other than the globals.css file was being changed and saved OR the globals.css file had to be saved twice in which case the save trace was one step behind. So for example if added a background: black; to the and save it won't hot reload, but when I comment that line, save, it hot reloads but it shows the background as black since the previous save had that code.


https://player.cloudinary.com/embed/?cloud_name=debb5frn9&public_id=2025-12-29_09-36-39_uyphgr&profile=cld-default

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home Single Language
  Available memory (MB): 16106
  Available CPU cores: 16
Binaries:
  Node: 20.17.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 9.9.0
Relevant Packages:
  next: 16.0.7 // There is a newer version (16.1.1) available, upgrade recommended! 
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

CSS

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

next dev (local)

Additional context

https://player.cloudinary.com/embed/?cloud_name=debb5frn9&public_id=2025-12-29_09-36-39_uyphgr&profile=cld-default

GitHub Labels

Turbopacklinear: turbopackCSS

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!

Risk Flags

  • Turbopack-related
  • CSS hot reload
Loading labels...

Details

Points10 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedno