In Next.js, Realtime Database 'Maximum call stack size exceeded' error when reading nested data

[hjcdg1]

Although I posted a question on StackOverflow before a few days, It hasn't been answered yet. So I'm writing the same question here, because I think the problem is directly related to firebase/database implementation. (I'm not sure.)

https://stackoverflow.com/questions/74134698/firebase-realtime-database-maximum-call-stack-size-exceeded-error-when-reading

---

When I read some nested data from Firebase Realtime Database, the following error was raised.

Uncaught RangeError: Maximum call stack size exceeded

My project is based on Next.js with Typescript. So, to clarify this problem, I tested on a new project created by create-next-app as follows.

npx create-next-app@latest --typescript
cd {project folder path}
npm install firebase

And I wrote the following code in _app.tsx. (Note useEffect() part.)

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { useEffect } from "react";
import { initializeApp } from "firebase/app";
import { getDatabase, onValue, ref } from "firebase/database";

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    const firebaseConfig = {
      ...
    };
    const app = initializeApp(firebaseConfig);
    const db = getDatabase(app);

    onValue(ref(db, "ABC"), (snapshots) => console.log(snapshots.val()));
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

The database state is as follows.

When I run this code in local(npm run dev), the output was correctly {DEF: 123}.

But when I run this code in production(npm run build and npm run start), the output was null and the above error was raised on console.

Why does this problem happen? For your information, I confirmed the fact that if the data is not nested the error is not raised and the correct data is returned in both local and production. (For example, if the data structure is {ABC: 123}, the output is 123, not null.)

Please help me. Since this error occurs even in pure Next.js projects, I can't help but wonder why it's still not being discussed.

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[hjcdg1]

I'm the author of this issue.

I resolved this problem by downgrading Next.js version from 12.3.1 to 12.3.0.

[ethan-crabb]

Having this issue too. Downgrading to Next 12.3.0 seems to work but I'm still unsure as to what the root cause is. Anyone got a clue?

[maneesht]

I unfortunately wasn't able to reproduce this issue. A stacktrace/log would be very helpful in getting to the bottom of this.

[ethan-crabb]

In my experience the error only occurs in production builds so I wasn’t able to get a stack trace. Can’t think of any reasonable explanation as to why this I would occur in this specific circumstance, firebase returns the exact same data in both production and development. Then again I’m quite new to next and not too familiar with its compilation intricacies.

[maneesht]

Could you please provide a minimal repro?

[Jasonkoolman]

This was driving me nuts. Experienced the same issue and can confirm that downgrading to Next 12.3.0 works. Something has changed in v12.3.1 which is causing the issue.

@maneesht The issue occurs when subscribing to rtdb using onValue in useEffect. In my case I have implemented presence in Cloud Firestore. Thus, useEffect looks like this:

useEffect(() => {
    // Create a reference to the special '.info/connected' path in
    // Realtime Database. This path returns `true` when connected
    // and `false` when disconnected.
    const unsubscribe = onValue(rtdbRef(".info/connected"), (snapshot) => {
      const isConnected = snapshot.val();
      if (isConnected !== isOnline) {
        onConnectionChanged(isConnected);
      }
    });

    return () => {
      unsubscribe();
    };
  }, [isOnline, onConnectionChanged]);

Worked fine locally, but on production (I'm using Firebase Hosting with Next.js) the maximum call stack size exceeded error is thrown:

[maneesht]

@Jasonkoolman Thank you for this example. Do you see this problem when running a production build locally?

Reopening as this is still an issue. (Though it's not clear if the fix should be in the JS SDK.)

[ethan-crabb]

Jason’s post mirrors my situation exactly. Running a production build locally still produces the error.

[areeburrub]

I am also having this issue, when I am trying to get val() from a snapshot data from the firebase RealTime Database then this issue is happening.

I am not using on value I am getting the data once

const snapshot = await get(userRef);

try {
    const userObj = await snapshot.val();
    setUser(userObj);
    userObj.regComplete ? router.push("/") : router.push("/join/complete");
    } 
catch (e) {
    console.log(e);
}

Throws me this exception:

RangeError: Maximum call stack size exceeded
   at parseInt (<anonymous>)
   at i (_app-29b4c3153e3b18e1.js:1471:876)
   at i (_app-29b4c3153e3b18e1.js:1471:897)
   at i (_app-29b4c3153e3b18e1.js:1471:906)
   at i (_app-29b4c3153e3b18e1.js:1471:897)
   at i (_app-29b4c3153e3b18e1.js:1471:906)
   at i (_app-29b4c3153e3b18e1.js:1471:897)
   at i (_app-29b4c3153e3b18e1.js:1471:906)
   at i (_app-29b4c3153e3b18e1.js:1471:897)
   at i (_app-29b4c3153e3b18e1.js:1471:906)

I am on "next": "12.3.1" hope this get's resolved soon

---

I just upgraded to 13.0.1 and it's working

[maneesht]

@Jasonkoolman - could you please share your code for onConnectionChanged? I'm curious whether if it's updating isOnline and then causing the useEffect to run again

[milo-]

Seeing the same issue, disabling swcMinify during build prevents the issue from happening

[icopp]

I encountered exactly this problem with Next 12.3.4. Disabling swcMinify didn't help, but locking the version to 12.3.0 (with swcMinify still enabled) fixed it.

[clementdevos]

I'm pulling this up because i'm encoutering an issue with this as well.

On dev mode, While doing a set on RTDB we have quite the same issue This is how we write a node

setFirebaseValue(`users/${uid}/lastActivity`, usage).catch((error) => {
      if (error) {
          console.log(error);
      }
  });
[...]
export const setFirebaseValue = <T>(targetRef: string | undefined, value: T) => {
    const db = getDatabase();
    return set(ref(db, targetRef), value);
};

This happens.

We're on firebase 10.0.0, next 13.4.9. I've tried to reproduce this on a fresh project and it did not happen though.

We're on a yarn workspace monorepo and our next project is in a package .

Anyone has the same issue?

*Auto update :

Adding

  "resolutions": {
        "@firebase/database": "0.13.6",
        [...]
    },

to our root package.json fixed it

[MarianDevima]

Works fine on the following versions: package.json

 "dependencies": {
        "next": "12.3.0",
        "firebase": "9.9.4",
        ...
    }

swcMinify - Enabled

[Eronne]

Just saw this issue and have the same one on my project. I was not able to use a set and a onValue at the same place. The solution for me to use last versions of packages was upgrading node version from 18 to 20 🚀