My friend: "Oh hey, you haven't worked on that new microsite much since IWC last weekend, then?"
Me: "Codebase's haunted."
Friend: "What?"
Me: *loading a pistol and heading into the server room* "Codebase's haunted."
Last weekend, I started making a public site for my beer journal. One of the features I didn't get around to adding was search functionality, so when a free evening popped up earlier this week, I figured, hey, why not try to check that off the to-do list?
I opened up VS Code, launched the project repo, and started up the local development server. Except, when this loaded in my browser, it didn't have any styles. The content was all there – drink entries, title, images, etc. – but none of the design. When I inspected the page in the browser's developer tools, there was no CSS at all. Weird 🤔
I rebooted the server: same issue. I started it up on a different port: same issue. I wiped my local node_modules folder and lock files, made sure all dependencies were using their most recent version, restarted everything: same issue. In desperation, I began disabling various plugins, and when I disabled the Netlify adapter and then restarted the dev server, suddenly I had CSS again! Hooray! 🎉 But also, oh no! 😬 I kind of need that adapter, not least of all because I was hoping to implement server-side search, rather than relying on a client-side library.
Still, I had a working solution that I could at least experiment and play around with, so I opened a support topic on the official Astro Discord, and made the best of the time that I had left. I got basic search working, pushed it up to Netlify, and everything seemed fine, even if the CSS issue persisted locally.
Having not received any suggestions or comments on my support request, I began asking around elsewhere. The folks over at Frontend Horse came through (as per usual) with a bunch of ideas to try and help narrow down the root cause:
- Have you tried turning it off and on again? Yeah, unfortunately 😅
- Have you tried replicating the issue on StackBlitz? The bug doesn't replicate; the site works fine in that environment!
- Have you made sure you're running the latest version of Astro? Yes.
- Have you rolled back to a previous version? Can't hurt... no change.
- What happens if you create a new Astro codebase? Does that have the same issues? Okay, fine, let me give that a go.
The answer? Nope! The new codebase works fine. I even downloaded the excellent WinMerge tool and did a full, folder-to-folder diff. There were some red herrings along the way – such as the old repo using a different form of carriage return (I think this may have been a false positive, to be honest) – but after I'd diligently gone through and cloned away any differences between both repositories – including within the dependency folders – and then rebuilt both local dev environments, guess what? No. Freakin'. Difference. 😒
The new codebase was working fine on any port I chose; the old one still refused to serve any CSS. I tried renaming the folders; I even gave them each other's names, just to be sure this wasn't a lil' Bobby Tables issue. I created a new GitHub repository and linked it all up. I aligned Git histories (as closely as possible) and generated identical branch structures. Nothing mattered. Nothing changed. The original codebase refused to bundle any CSS. The new one worked flawlessly. The only practical explanation was that the original codebase had become haunted, or possibly sentient, and was just screwing with me.
Whilst I was having a minor breakdown and beginning to question the very concept of reality, Mayank had offered some more advice back on Frontend Horse, suggesting an intermittent or edge-case bug with Astro (or possibly Vite 5) on Windows. They'd also suggested running the dev server within WSL, which got me wondering. The last thing I'd done on this codebase before it had stopped working was to use VS Code tunnels to access it from my iPad. Could that have caused Vite to output the CSS somewhere else? Maybe to the root of the tunnelled server, rather than the local one? Is this a "Windows being helpful" issue, where that old tunnel is still running somewhere, even though I (thought I had) shut it down days ago? Or a Vite incompatibility with some kind of temporary Windows redirect?
I fired up Task Manager, and scrolled around the Details panel, looking for anything that seemed out of place. There were quite a few VS Code processes running, but then I did have the application open. However, there were also a half dozen terminal (cmd.exe) processes in there, too. This was more suspicious, because I wasn't running any terminal windows at that moment. To be safe, I wiped the lot[1], then shut down VS Code, restarted the PC, and opened it all back up again. And y'know what?
It worked.
...
So I guess I did need to turn it off and on again. Just more forcefully 😂
Honestly, I'm not sure what fixed the issue. At this point, it could have been one of a half-dozen different options; I'd long since given up trialling fixes incrementally, and was taking a more shotgun-like approach, with buckshot flying wildly as I desperately tried to make any difference at all. If it happens again I'll be a bit more methodical. For now, I'm just happy to have the codebase working, and hope that whatever ghost was haunting my machine has found peace 🙏
