Firestore keeps trying to setup emulators when it's already running in Next.js app

Question

Has anyone ran into troubles with firebase and its emulators? I keep getting the following error on hot reload.

FirebaseError: Firestore has already been started and its settings can no longer be changed. You can only modify settings before calling any other methods on a Firestore object.

Initialisation:

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);

let mode = "emulate";

const auth = getAuth(firebaseApp);
const db = getFirestore(firebaseApp);
const storage = getStorage(firebaseApp);
const functions = getFunctions(firebaseApp);

if (mode === "emulate") {
  connectAuthEmulator(auth, "http://localhost:9099");
  connectFirestoreEmulator(db, "localhost", 8080);
  connectStorageEmulator(storage, "localhost", 9199);
  connectFunctionsEmulator(functions, "localhost", 5001);
}

export { firebaseApp, db, auth, storage, functions };

Does this answer your question? [Firebase Firestore emulator error \`Host has been set in both settings() and useEmulator(), emulator host will be used\`](https://stackoverflow.com/questions/65066963/firebase-firestore-emulator-error-host-has-been-set-in-both-settings-and-usee) — juliomalves, Oct 19 '21 at 16:21

score 2 · Answer 1 · answered Mar 24 '22 at 10:55

I will add the solution from this post here as it worked for me.

Solution

    const EMULATORS_STARTED = 'EMULATORS_STARTED';
    function startEmulators() {
      if (!global[EMULATORS_STARTED]) {
        global[EMULATORS_STARTED] = true;
        firebase.firestore().useEmulator('localhost', <your_port>);
        firebase.auth().useEmulator('http://localhost:<your_port>/');
      }
    }
    
    if (process.env.NODE_ENV === 'development') {
      startEmulators();
    }

Note- If you are using Firebase V9:

const EMULATORS_STARTED = 'EMULATORS_STARTED';
function startEmulators() {
  if (!global[EMULATORS_STARTED]) {
    global[EMULATORS_STARTED] = true;
    connectFunctionsEmulator(functions, 'localhost', <your_port>);

    connectFirestoreEmulator(db, 'localhost', <your_port>);
  }
}

if (process.env.NODE_ENV === 'development') {
  startEmulators();
}

Reason:

The reason this needs to be done is that NextJS is trying to run the connect to the emulators many times over. This prevents emulators from connecting more than once.

score 1 · Answer 2 · answered Oct 22 '21 at 18:47

1

Seems useEmulator is called multiple times from the same browser instance. My suggestion is check this post in which the similar issue.

answered Oct 22 '21 at 18:47

Luis Fernando Celis Romero

81
1

score 0 · Answer 3 · answered Feb 03 '23 at 10:21

Had a similar problem and the following did the trick for me.

import { getApps } from 'firebase/app';

if (getApps().length === 0) {
   connectAuthEmulator(auth, "http://localhost:9099");
   connectFirestoreEmulator(db, "localhost", 8080);
   connectStorageEmulator(storage, "localhost", 9199);
   connectFunctionsEmulator(functions, "localhost", 5001);  
}

Firestore keeps trying to setup emulators when it's already running in Next.js app

3 Answers3

Solution

Reason: