useFirestore breaks the app when used in a function in the utils folder and the page is refreshed (nuxt)

[StefanGhiban]

Reproduction

Steps to reproduce the bug

I have the following code in a file called "firestoreReferences.ts" in the nuxt utils folder:
import { collection } from "firebase/firestore";

const db = useFirestore();

export const restaurantsCollRef = collection(db, "restaurants");
export const bookingsCollRef = collection(db, "bookings");

Expected behavior

The references should be auto imported and used throughout the app with no issue.

Actual behavior

On page refresh, the app breaks with the following error: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).

If I just access the page, without refreshing, it works fine, but it is because maybe firebase has already loaded.

Additional information

Is this a bad practice? or is there a way to ensure firebase has loaded before using the useFirestore composable?

[D4rkMindz]

Hi @StefanGhiban, could you resolve this problem? I have something similar that blocks me since quite a while...

[D4rkMindz]

I created an issue #1588 (which was then routed to the discussion #1589) for this problem