Firebase production Error: ReferenceError: emptyChildrenSingleton is not defined

Viewed 37

I have a nextjs project, v12.1.3 with react v18.1.0. I use firebase realtime database to handle notifications into my project. It works in develop mode, but it doesn't in production (on built environment).

The errors I get are the following:

ReferenceError: emptyChildrenSingleton is not defined
    at new bV (a198fdd9-b0625f5d1b77c03a.js:1:75705)
    at new cF (a198fdd9-b0625f5d1b77c03a.js:1:95593)
    at a198fdd9-b0625f5d1b77c03a.js:1:124619
    at get _repo [as _repo] (a198fdd9-b0625f5d1b77c03a.js:1:124994)
    at get _root [as _root] (a198fdd9-b0625f5d1b77c03a.js:1:125199)
    at d_ (a198fdd9-b0625f5d1b77c03a.js:1:120499)
    at n (index-493c2cb0fc06fe87.js:1:879)
    at index-493c2cb0fc06fe87.js:1:826
    at g0 (framework-47484f2290a3befd.js:1:91915)
    at h9 (framework-47484f2290a3befd.js:1:113308)

[2022-06-13T21:12:40.922Z]  @firebase/database: FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read properties of undefined (reading 'syncPointTree_')
    at cM (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:99754)
    at cI (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:97044)
    at dC (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:109983)
    at http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:124197
    at ap (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:3775)
    at d.onServerInfoUpdate_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:124182)
    at d.handleTimestamp_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:43294)
    at d.onReady_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:39829)
    at aM.onConnectionEstablished_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:26211)
    at aM.onHandshake_ (http://localhost:3000/_next/static/chunks/a198fdd9-b0625f5d1b77c03a.js:1:25266) 

Uncaught TypeError: Cannot read properties of undefined (reading 'syncPointTree_')
    at cM (a198fdd9-b0625f5d1b77c03a.js:1:99754)
    at cI (a198fdd9-b0625f5d1b77c03a.js:1:97044)
    at dC (a198fdd9-b0625f5d1b77c03a.js:1:109983)
    at a198fdd9-b0625f5d1b77c03a.js:1:124197
    at ap (a198fdd9-b0625f5d1b77c03a.js:1:3775)
    at d.onServerInfoUpdate_ (a198fdd9-b0625f5d1b77c03a.js:1:124182)
    at d.handleTimestamp_ (a198fdd9-b0625f5d1b77c03a.js:1:43294)
    at d.onReady_ (a198fdd9-b0625f5d1b77c03a.js:1:39829)
    at aM.onConnectionEstablished_ (a198fdd9-b0625f5d1b77c03a.js:1:26211)
    at aM.onHandshake_ (a198fdd9-b0625f5d1b77c03a.js:1:25266)

The integration is very basic: I write my notification client side and create them server side with firebase-admin. So the problem is reading from realtime database (in prod only).

The code is something like this (i simplified it)

  const [textData, setTextData] = useState<any[]>([]);
  
  useEffect(() => {
    initFirebase();
    fetchData();
  }, []);

  const fetchData = () => {
    const db = getDatabase();
    const starCountRef = ref(db, 'testData');
    onValue(starCountRef, (snapshot) => {
      const data = snapshot.val();
      setTextData(
        Object.entries(data || {}).map(
          ([key, value]: [key: string, value: any]) => ({
            key,
            text: value?.text,
          })
        )
      );
    });
  };

Where initFirebase() is a classic:

import { getApps, initializeApp } from 'firebase/app';

const firebaseConfig = {
  //my configs
};

// Initialize Firebase
const initFirebase = () => {
  if (getApps().length && getApps.length > 0) return getApps()[0];
  return initializeApp(firebaseConfig);
};

export default initFirebase;

It might seem all right. And it is. I made this into an empty project and it actually work. (here the repo without the error).

I tried to replicate the error I have in my repo and I did it. This is the repo with the error. The error must be something with the packages, react or nextjs version, but I don't get it.

For simplicity You can take a look directly to the repos. I think the code is all right.

How do you think this error can be fixed?

P.S. the repos are also deployed on vercel, so you can try also to see the logs. Of course you can also make a PR.

1 Answers

I found out the problem is the last version of next (12.1.3).

In particular swcMinify. In fact, I had this option set to true into the file next.config.js. I also found out that there are several issues about swcMinify in production build. So, in order to solve the problem I described above, you just have to turn off swcMinify, or remove it. After that everything seems to be all right.

Conclusion: This is not a firebase error.

Related