astro icon indicating copy to clipboard operation
astro copied to clipboard

Case mismatched .astro components do not hot reload when running dev server

Open LrsChrSch opened this issue 3 years ago • 1 comments

What version of astro are you using?

1.0.6

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

Hey there! Just wanted to test out Astro and found a minor bug/inconvenience.

The stackblitz link doesn't really convey the problem because it behaves a little differently than my machine.

So I started with the basic template and added tailwindcss. Deleted pretty much all of the content from index, Layout, and threw the existing Card component out of the window.

index.astro

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---

<Layout title="Welcome to Astro.">
	<main class="my-32 max-w-prose mx-auto">
		<h1 class="text-6xl font-bold text-center">Hello, <span class="bg-gradient-to-r from-emerald-600 to-teal-500 bg-clip-text text-transparent">Github!</span></h1>
		<Card title="Hello"/>
	</main>
</Layout>

I made a new card.astro component and linked it like you see in the code snippet.

Now here's the bug: npm run dev starts the dev server and loads everything as it should. But now when I make a change to card.astro, it won't get refreshed. I have to start the dev server manually again for it to work. Notice the names: I have imported "Card.astro" but the file is called "card.astro". It doesn't hot-reload when it's lowercase, a manual reload works fine.

This problem drove me crazy until I found out that simply changing the name solves the problem.

So why raise this issue? The issue is, that there was no warning on my end (there is one in the stackblitz when you rename the card component). The console doesn't show anything, the network tab doesn't show anything, the site doesn't show anything. It would be nice to have the cli give a warning that there is a name mismatch and that reloading might not work

That's all, thank you so much! I'm very excited to see where Astro.js is going in the future.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-m9axad?file=src/pages/index.astro

Participation

  • [ ] I am willing to submit a pull request for this issue.

LrsChrSch avatar Aug 22 '22 11:08 LrsChrSch