Dynamically import firebase firestore module causes 'firestore.disableNetwork is not a function'

Question

I'm trying to reduce my bundle size in my CRA React/Redux/Firebase app by dynamically importing Firestore after I have initialized my app.

When I was eagerly importing firebase modules, my form handler worked perfectly. I am using firestore.disableNetwork() and firestore.enableNetwork() in my form handler to handle weak connection scenarios where the browser can't decide if it's online or offline.

Since changing to a dynamic import of Firestore, I'm getting the error firestore.disableNetwork is not a function when I submit a form action.

When I load Firestore as per the docs like this:

import "firebase/compat/firestore";
...
firebase.firestore().settings({
  cacheSizeBytes: firebase.firestore.CACHE_SIZE_UNLIMITED,
  experimentalAutoDetectLongPolling: true,
  merge: true
});

firebase.firestore().enablePersistence({ synchronizeTabs: true });

I get Firestore like this (working correctly):

However when I dynamically import Firestore like this:

import("firebase/compat/firestore").then(() => {
  firebase.firestore().settings({
    cacheSizeBytes: firebase.firestore.CACHE_SIZE_UNLIMITED,
    experimentalAutoDetectLongPolling: true,
    merge: true
  });
  firebase.firestore().enablePersistence({ synchronizeTabs: true });
});

I get Firestore like this (no disableNetwork or enableNetwork()):

My (relevant) dependencies:

"firebase": "9.6.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "5.0.0",
"react-redux": "7.2.6",
"react-redux-firebase": "3.11.0",
"redux-firestore": "0.15.0",

I have tried going back to Firebase v8 from v9 and it's the same result.

Is there a better way to import firebase modules dynamically to ensure all the methods are available? Thanks.

Answer 1

firebase.default seems to work for me.

const fetchData = async () => {
      const firebase = await import("firebase/compat/app");
      await import("firebase/compat/firestore");

      const res = await firebase.default.firestore().doc(`docs/docId`).get();
};