Fix Astro dev server hanging with new collections API
This week I was in the process of upgrading this site to Astro v2 and its new features. Upgrading to version 2 went smoothly, but I encountered a frustrating problem adopting the new content collections API.
I repeatedly hit an issue where the Astro dev server will hang after calling
getCollection from astro:content. The hardest part is that there are no
errors in the browser or console – just an endless spinner when you try to load
the page.
I though that maybe a solution was to
manually clear Vite’s cache
before restarting the dev server, which was as sophisticated as
rm -rf node_modules/.vite. This may have resolved the issue a few times, but
everything was so intermittent that I can’t say for sure.
On the Astro Discord, I posed a question to see if anyone else had encountered a similar issue. One of the devs linked to this issue on GitHub which described a similar scenario. The problem there is a page and its layout calling the same collection.
Looking back to my code, I couldn’t see where that was happening, but I decided
to remove all the layout prop from the entries in that collection. (I wanted
to do this anyway, since moving to content collections made a separate layout
unnecessary.)
After those changes, the hanging dev server issue resolved itself. I’m glad to have found a fix, thought it would probably be good for Astro to recommend not using layouts for content collections.
Onward!