Dev server does not load on http://localhost:3000/hello-astro/

hellotham / hello-astro

Hello Astro is a multi purpose Astro starter theme written in Typescript, TailwindCSS and AlpineJS. It supports Markdown and MDX based pages and blog posts.

https://hellotham.github.io/hello-astro

MIT License

158 stars 55 forks source link

Dev server does not load on http://localhost:3000/hello-astro/ #10

Closed joyfulelement closed 1 year ago

joyfulelement commented 1 year ago

Hi, thanks for the creation of the astro template, I had a chance to try running this with yarn run dev, but the site does not load from http://localhost:3000/hello-astro/

The Issue

If I try the root path, it will return the expected 404 page:

However, if I navigate to http://localhost:3000/hello-astro/ it will just keep loading indefinitely with no response:

Other Findings

I tried run a different astro dev server with a different project under the same http://localhost:3000/ , seems to work perfectly. The issue seems to be specific to hello-astro.
In hello-astro, yarn build + yarn preview works flawlessly 🎉

Was there any other steps needed before running yarn run dev? Any guidance would be much appreciated, thank you.

ChristineTham commented 1 year ago

Hello - thanks for raising this issue. As I noted in the release notes for v2.1.0, I am also encountering this issue. Not quite sure why, I think it is a problem with Astro. I am still investigating, and will update if I find any solutions. If you have any ideas, let me know.

ChristineTham commented 1 year ago

I've traced the problem to the following line:

const posts = await getCollection('blog')

This is just a vanilla call to grab a list of blog posts in Astro v2 and it works in build but not dev. There is no easy workaround, but I will investigate further.

For what it's worth, Release v1.1.0 does not have this problem, only the v2.x releases which use content collection.

ChristineTham commented 1 year ago

I have now submitted a bug report to astro documenting this issue: https://github.com/withastro/astro/issues/6173

joyfulelement commented 1 year ago

Looks like we did encountered a real issue with circular dependencies when calling getCollection(), thanks for digging through this and raise it to the astro team.

joyfulelement commented 1 year ago

I've traced the problem to the following line:
const posts = await getCollection('blog')
This is just a vanilla call to grab a list of blog posts in Astro v2 and it works in build but not dev. There is no easy workaround, but I will investigate further.

For what it's worth, Release v1.1.0 does not have this problem, only the v2.x releases which use content collection.

May I know how you manage to trace back to this line of code? Is there certain mode to run yarn run dev that can give us the pointers to help troubleshoot astro when it hangs like this? My browser wasn't loading anything so devTool wasn't helpful.

ChristineTham commented 1 year ago

May I know how you manage to trace back to this line of code? Is there certain mode to run yarn run dev that can give us the pointers to help troubleshoot astro when it hangs like this? My browser wasn't loading anything so devTool wasn't helpful.

LOL I just did it the old school way, I kept commenting out blocks until I found the problem. I was suspecting getCollection from the start, so it didn't take long.

ChristineTham commented 1 year ago

This issue is now resolved with Release v2.3.0 - astro dev works again.

Can you confirm this is the case?

joyfulelement commented 1 year ago

This issue is now resolved with Release v2.3.0 - astro dev works again.

Can you confirm this is the case?

Confirmed release v2.3.0 with astro dev working again. Thanks!