Firestore offline data access not working

Following the guides for using reactfire, I have tried enable offline access to data https://github.com/FirebaseExtended/reactfire/blob/main/docs/use.md#access-data-offline .

However, this is not working, and I get next exception:

Unhandled Rejection (FirebaseError): Firestore has already been started and persistence can no longer be enabled. You can only enable persistence before calling any other methods on a Firestore object.
....

The line causing this issue is here:

await enableIndexedDbPersistence(db);

Removing previous line and the problem is solved, however, by doing so the offline access is bypassed.

Version info

Latest versions for react, firebase, reactfire.

Test case

In order to reproduce this issue, I have created 2 GitHub repositories

1. https://github.com/constantin-ungureanu-github/test

   • simple react app of the Burito quickstart example, where I also tried to use the offline data access.

2. https://github.com/constantin-ungureanu-github/test-pwa-typescript

   • simple react app where I copied the examples from reactfire source code (non-concurrent ones), and the result is the same, enableIndexedDbPersistence produces the same exception.

Steps to reproduce

Simply run the react examples described above. npm install npm start

Expected behaviour

Guide for data offline access to work as described.

Actual behaviour

Enabling offline access is not working, exception is thrown.

[jerryeechan]

Connect to emulator before enable Persistence works

const { status, data: firestore } = useInitFirestore(async (firebaseApp) => {
    const db = initializeFirestore(firebaseApp, {});
    connectFirestoreEmulator(db, "localhost", 8080);
    await enableIndexedDbPersistence(db);
    return db;
  });

[bruceharrison1984]

I got this working with the following:

// utils/firestore.ts
export const getInitializedFirestore = () => {
  const firestore = getFirestore();

  // only enable emulator if in dev mode, and we haven't already enabled it
  if (
    process.env.NODE_ENV === 'development' &&
    (firestore as any)._getSettings().host === 'firestore.googleapis.com'
  ) {
    connectFirestoreEmulator(getFirestore(), '127.0.0.1', 8080);
    console.log('firestore emulator attached');
  }

  // only enable indexeddb if the firestore client hasn't been fully initialized
  if (!(firestore as any)._firestoreClient) {
    enableMultiTabIndexedDbPersistence(firestore);
    console.log('persistence enabled');
  }
  return firestore;
};

Replace any calls to getFirestore() with getInitializedFirestore(). This is also HMR and page refresh safe, so dev mode is pleasant, and it can safely be deployed without having to touch anything.

I don’t know why the Firebase SDK doesn’t make these properties visible, but this lets you check the status without keeping track of global variables.