Estoy usando Vite + React.

Ejecuto mi proyecto usando npm run dev y todo está bien. El proyecto se ejecuta y puedo usarlo dentro del navegador.

Luego abro algunos archivos, los cambio y guardo.

Tan pronto como guardo, veo este feo error:

Error de referencia no capturado: no se puede acceder a 'X' antes de la inicialización

Y esa X puede ser muchas cosas.

Algunos puntos aquí:

1. He visto muchas preguntas relacionadas con esto en las que los desarrolladores usan una variable y luego la declaran. Ese no es mi caso. Su código no funcionará la primera vez. El mío funciona a la primera.
2. Digamos que tengo 5 listas y 5 formularios dentro de mi aplicación. Cambio List2.jsx y veo que List1.jsx causó este error. WTF? Nadie ha cambiado List1.jsx , ¿por qué ahora debería causar un error?
3. Cuando guardo un archivo .jsx , espero ver la versión actualizada de ese archivo en la pestaña Red de mi navegador. Pero lo que veo es que muchos archivos se están recargando nuevamente. ¿Por qué? Acabo de cambiar un archivo, un carácter, y ¿por qué debería ver que todos estos archivos se vuelven a cargar?
4. ¿Cómo puedo depurar esto?