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.