Hot reload issue with global CSS in Next.js 16.1.1.
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.
https://github.com/tanishqkrk/next.js
npm install npm run dev
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.
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
CSS
next dev (local)
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!