Почему мое приложение для одного файла не устанавливается после реализации загрузки Domcontent, загруженного »? ⇐ Html

[Anonymous]

Я новичок, обучающую себя веб -разработке, и я впервые создаю приложение в этом комплексе. Я застрял в течение нескольких дней по вопросу о загрузке и был бы невероятно благодарен за какой -то экспертный совет. Для простоты все приложение (HTML, CSS и React JS) находится в одном файле index.html. Я использую:
React 18 (через Cdn)
библиотеки Compat Firebase V9 (для Auth и Firestore)
leaflet.js для карты
abel antadealy, чтобы преобразовать jsx /> Приложение застряло в начальном сообщении HTML загрузки. Компонент приложения React, кажется, никогда не устанавливается. Самым запутанным является то, что в консоли разработчика браузера вообще нет ошибок. Это очень трудно отладки. Затем он опросывает каждые 100 мс, чтобы убедиться, что window.fireBase доступен до того, как он попытается отобразить приложение React. Журналы консолей показывают, что эта часть работает - она ​​обнаруживает Firebase и вызывает функцию, чтобы отобразить приложение. Тем не менее, после этого ничего не происходит на странице. />https://jsfiddle.net/6jndktb3/latest/образное. Полный компонент находится в jsfiddle. < /P>



// This is inside my main component

React.useEffect(() => {
console.log("[App useEffect - Firebase Init] Hook triggered.");
const initializeFirebaseInternal = async () => {
try {
console.log("[initializeFirebaseInternal] Start.");
const app = window.firebase.initializeApp(DEFAULT_FIREBASE_CONFIG);
const firestoreDb = window.firebase.firestore(app);
const authInstance = window.firebase.auth(app);

setDb(firestoreDb);
setAuth(authInstance);
console.log("[initializeFirebaseInternal] db and auth state set.");

authInstance.onAuthStateChanged(async (user) => {
console.log("[onAuthStateChanged] Fired. User:", user ? user.uid : 'null');
if (!user) {
console.log("[onAuthStateChanged] No user, attempting signInAnonymously...");
await authInstance.signInAnonymously();
}
console.log("[onAuthStateChanged] Setting isAuthReady to true.");
setIsAuthReady(true);
});
console.log("[initializeFirebaseInternal] onAuthStateChanged listener attached.");

} catch (error) {
console.error("Firebase initialization error:", error);
setIsAuthReady(true);
}
};

initializeFirebaseInternal();
}, []); // Empty dependency array ensures this runs once on mount
< /code>


My Question:

Given that the console shows the app is trying to render, but the page never updates, could there be a silent error or a logical flaw in my useEffect hook that's preventing the isAuthReady state from updating and causing a re-render?

Thank you so much for looking at this.


Подробнее здесь: https://stackoverflow.com/questions/796 ... ontentload