Search code examples
reactjsfirebasegoogle-cloud-firestorenext.jsfirebase-cli

Firebase Firestore emulator error `Host has been set in both settings() and useEmulator(), emulator host will be used`


first of all that is the full error I got.

@firebase/firestore: Firestore (8.1.1): Host has been set in both settings() and useEmulator(), emulator host will be used
Error [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.

this is how I init the emulator

const db = app.firestore();
const auth = firebase.auth();
if (process.env.NODE_ENV === 'development') {
  db.useEmulator('localhost', 8888);
  firebase.auth().useEmulator('http://localhost:9099/');
}

the project is running nextjs when I first start the application everything run as expected but after some refreshing or navigation among next.js pages, I suddenly get this error. and I have to kill the terminal and start over which is annoying I don't know if next.js server runs the if (process.env.NODE_ENV === 'development') code several times and this could be the cause of this error if that is case how to avoid setting a new emulator when there is one already. or is it a bug related to firebase emulators?.


Solution

  • after trying almost all of the solutions here it didn't really work the bug was happening from time to time the annoying thing is that I didn't know how to reproduce it but I think it happens when this page has a server-side error anyway the solution I used for getting around this bug was the following

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

    but for this to work like expected you will need to make sure that all emulators have started before making a request to the next.js server because if this code was executed before the emulators start then global[EMULATORS_STARTED] would be true and it will never use the emulators in this case. I have tested this on so many pages and some of them had server-side errors and the bug wasn't happening instead I got logs of these errors which is the expected behavior I didn't know these Errors existed in the first place before applying this solution 😁.