Tengo un problema en el que mi aplicación React falla debido a que no puedo acceder a la base de datos.

Estoy inicializando la aplicación firebase en 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") );

Luego, en un archivo diferente que está en src/dashboard/signup/SignupForm.js, trato de actualizar db para agregar un usuario registrado cuando el usuario envía un formulario validado (la única forma en que he podido averiguar cómo enumerar a todos los usuarios registrados es a través de db ya que no hay una función directa que le permita hacer eso).

 import { db } from "../../.."; // const db = getFirestore() const unsub = onSnapshot(doc(db, "users", "userCount"), (doc) => { console.log("Current data: ", doc.data()); });

Aquí estoy tratando de realizar cambios en vivo para que si algunos usuarios se registran al mismo tiempo, el valor se actualiza correctamente.

Sin embargo, en ambos sentidos, si configuro db en src/index.js o en la carpeta de formulario, mi aplicación falla.