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

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 ;
}

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.