I'm using Vite + React.

I run my project using npm run dev and everything is fine. Project runs and I can use it inside the browser.

Then I open some files, change them and save.

As soon as I save I see this ugly error:

Uncaught ReferenceError: Cannot access 'X' before initialization

And that X can be a lot of things.

Some points here:

1. I've seen many questions related to this in which developers use a variable and then declare it. That's not my case. Their code won't work the first time. Mine works the first time.
2. Let's say I have 5 lists and 5 forms inside my app. I change List2.jsx and I see that List1.jsx caused this error. WTF? Nobody has changed List1.jsx, why should it now cause an error?
3. When I save a .jsx file, I expect to see that file's updated version in my browser's Network tab. But what I see is that a lot of files are being reloaded again. Why? I just changed one file, one character, and why should I see all of these files being reloaded again?
4. How can I debug this?