I'm getting a problem where my React app is crashing due to not being able to access db.
I am initialising the firebase app in src/index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { initializeApp } from "firebase/app";
import { firebaseConfig } from "./firebase";
import { getFirestore } from "firebase/firestore";
initializeApp(firebaseConfig);
export const db = getFirestore();
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);Then in a different file thats in src/dashboard/signup/SignupForm.js I try to update db to add a registered user when user submits a validated form ( the only way I have been able to figure out how to list all registered users is through db since there is no direct feature that lets you do that ).
import { db } from "../../..";
// const db = getFirestore()
const unsub = onSnapshot(doc(db, "users", "userCount"), (doc) => {
console.log("Current data: ", doc.data());
});Here I'm trying to sub to live changes so that if a few users register at the same time the value updates correctly.
However in both ways, if I set db in src/index.js or in the form folder my app crashes.
Ok,
The problem was that I didn't move the db initialisation into the return of component