Firestore emulator issues - Could not reach Cloud Firestore backend

[janpansa]

I am using the latest versions of @nuxtjs/firebase and firebase:

"@nuxtjs/firebase": "7.6.1", "firebase": "^8.6.8",

I am using the firebase emulators locally, and it works fine, the emulator ui suite runs perfectly. I can open the UI suite and add data into firestore. I am able to add users and sign in with those users using auth, however, whenever I try to read or write from the firestore emulator, I recieve the following error:

@firebase/firestore: Firestore (8.6.8): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

If I run the same code without the emulator it works fine and also works fine in production.

I tried a combination of different things, not limited to:

• Tried firestore settings experimentalAutoDetectLongPolling and also experimentalForceLongPolling but it makes no difference.
• Tried a few different versions of firebase.
• I don't have any antivirus or weird networking issues.
• Tested with different browsers, Chrome, Firefox and Brave.
• Tested on different computers and different internet providers.
• Added env variable for FIRESTORE_EMULATOR_HOST just as a test, but didn't work.
• I have tried using different ports and different host configuration, i.e. localhost, http://localhost and http://0.0.0.0, again, all of these work and I am able to access the emaulator suite, just that all of these produce the same error when reading or writing to firestore in the emulator.

I see many people online has this issue throughout different versions of Firebase, and I am trying to figure out if this is an issue with this version of @nuxtjs/firebase together with this version of Firebase 8.6.8 ? Or is this a Firebase issue and not a @nuxtjs/firebase issue ?

Does anyone else experience this with those versions of @nuxtjs/firebase and firebase ?

Just for reference, here is a snippet of my nuxt.config.js

[
      '@nuxtjs/firebase',
      {
        config: {
          apiKey: process.env.FIREBASE_API_KEY,
          authDomain: process.env.FIREBASE_AUTH_DOMIAIN,
          databaseURL: process.env.FIREBASE_DATABASE_URL,
          projectId: process.env.FIREBASE_PROJECT_ID,
          storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
          messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
          appId: process.env.FIREBASE_APP_ID,
          measurementId: process.env.FIREBASE_MEASUREMENT_ID
        },
        onFirebaseHosting: true,
        services: {
          auth: {
            persistence: 'local',
            initialize: {
              onAuthStateChangedAction: 'onAuthStateChangedAction'
            },
            ssr: false,
            emulatorPort: useEmulators === true ? 9099 : undefined,
            disableEmulatorWarnings: false,
            emulatorHost: useEmulators === true ? 'http://0.0.0.0' : undefined
          },
          firestore: {
            // I tried diffferent things here to test with
            // memoryOnly: false,
            // enablePersistence: true,
            emulatorPort: useEmulators === true ? 8080 : undefined,
            emulatorHost: useEmulators === true ? 'http://0.0.0.0' : undefined
            // settings: {
            //   experimentalAutoDetectLongPolling: true
            // }
          },
          functions: {
            location: process.env.FIREBASE_FUNCTIONS_REGION,
            emulatorPort: useEmulators === true ? 12345 : undefined,
            emulatorHost: useEmulators === true ? 'http://0.0.0.0' : undefined
          }
        }
      }
    ],

Again, as mentioned above, the emulators work and run and I can access the emulator ui suite at port 8001. From there I am able to access Auth, create a user and in my app, sign in with said user. I can access firestore via the emulator suite ui and add some data into the database manually. I just cannot read or write from firestore without getting that error above.

Any help would be appreciated.

[simeon9696]

I only experience this with server side actions like fetching data in asyncData and fetch. I can read/write data on the client though

[janpansa]

I only experience this with server side actions like fetching data in asyncData and fetch. I can read/write data on the client though

I hear you, but afaik the firebase emulators does not work server side... My issue is only with firestore when connecting to the emulators locally. It works fine otherwise.

[simeon9696]

I've just realized you use the boolean useEmulators to signify whether or not to use it. I'm not seeing where you've defined useEmulators but the docs recommend testing the environment (developement or production)

emulatorPort: process.env.NODE_ENV === 'development' ? 8080 : undefined

You could also try setting the host to localhost: emulatorHost: 'localhost'

[janpansa]

@simeon9696

Got it working by changing emulatorHost to localhost. Strange that auth works with 0.0.0.0 but firestore does not, within my configuration. Just glad it works now !

Thanks to all who contributed here.