So something very strange is happening. I have built an API endpoint in Next.js that used a firebase firestore to hold data. After starting up the development server and navigating to the endpoint, I am able to see the data: API Result

[
    {
        "id": "20ZVNNLYh9gR58OYnRtB",
        "createdAt": {
            "seconds": 1635892290,
            "nanoseconds": 712000000
        },
        "authorId": "Hc6y1tymvQQL1eqZyZsc4UUINkz2",
        "url": "https://test.com",
        "sitename": "Test"
    }
]

However, if I reload the page just one time after this first call, the application breaks, and I am presented with this error: Firebase Error

FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

Here is the code I am using to initialize my firebase app:

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID
};

export default initializeApp(firebaseConfig);

And here is the code that is generating the API endpoint and returning the data from firebase/firestore:

import { getFirestore, collection, getDocs } from '@firebase/firestore';
import app from '@/lib/firebase';

const db = getFirestore(app);

export default async (_, res) => {
  const sites = [];
  console.log(typeof db);
  const snapshot = await getDocs(collection(db, 'sites'));
  // const snapshot = await db.collection('sites').get();

  snapshot.forEach((doc) => {
    sites.push({ id: doc.id, ...doc.data() });
  });

  res.status(200).json(sites);
};

Please let me know if there would be any additional helpful information, and I look forward to any feedback/help!

FYI, I am using "firebase": "^9.4.0" and the Web Version 9 (modular) firebase documentation.