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!