Next.js Discord

Discord Forum

Maximum Call Stack Exceeded Error

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
hey guys, im trying to build a web app using next.js for the first time, ive run into an issue i dont how to fix. 

useEffect(() => {
    async function getAuth() {
      const db = await getDB();
      const today = new Date();
      const date = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;

      const logs = collection(db, "logs");
      const dayC = doc(logs, date);
      const q = query(collection(dayC, "messages"));

      const unsubscribe = onSnapshot(q, (querySnapshot) => {
        const newMessages: string[] = [];
        const newTimestamps: string[] = [];
        querySnapshot.forEach((doc) => {
          const data = doc.data();
          if (data.message) {
            newMessages.push(data.message);``
          }
          if (data.timestamp) {
            newTimestamps.push(data.timestamp);
          }
        });
        setTimestamps(newTimestamps);
        setMessages(newMessages);
      });
      // Unsubscribe from the listener when the component unmounts
      return () => unsubscribe();
    }
    getAuth();
  }, []);


this is the server export:
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export async function getDB() {
  return db; 
}


im getting a maximum call stack exceeded error

4 Replies

export const db = getFirestore(app);
Asiatic LionOP
i tried that, it didn't work
American black bear
Do you still have this error?
Maybe this helps.
I'm not completely sure, but I think to pass a data from server to client component it must be serializable. : https://react.dev/reference/react/use-server#serializable-parameters-and-return-values

So instead of exporting whole db into client, (which is also might not be safe) you can create server actions for each action you want to. Say for example you can make a method updateUser({name, id}) which runs in server and call that in a client component.
If you want to retrieve data I think it's best to stringify and parse it once like this:
JSON.parse(JSON.stringify(dataToBeReturnerdFromServer))

From my understanding if you have a like a database which has object with id of type ObjectId then nextjs tries to recursively find the object with that Id (and idk what it does really😭😭 I might be wrong too. But it helped in my mongodb project)