Firebase Firestore works with real database but not emulator

I'm using Firebase and have started trying to run a local development instance using the Firebase Emulators. I'm running v8.4.1 of Firebase Tools. When I'm running with the real Firestore database everything works fine. However there is something wrong when I'm using the emulators.

I can set a document and then get it through Javascript but nothing shows in the Firebase Emulators UI and the same in reverse, when I add data through the Firebase Emulators UI it isn't available using get in Javascript. Also, when I use the import and export function of the Firebase Tools CLI none of the data I've added through Javascript is exported and imported. I'm not getting any errors in the browser console.

I'm not sure if there is something wrong I'm doing in initializing Firebase or some other config I'm missing?

I'm running: firebase emulators:start --only functions,firestore

Firebase setup code

import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/functions';

const db = firebase.initializeApp({
  apiKey: 'my_api_key',
  appId: 'my_app_id',
  authDomain: 'my_auth_domain',
  databaseURL: 'my_database_url',
  messagingSenderId: 'my_messaging_sender_id',
  projectId: 'my_project_id',
  storageBucket: 'my_storage_bucket',
}).firestore();

if (process.env.NODE_ENV === 'development') {
  firebase.setLogLevel('debug');

  db.settings({
    host: 'localhost:8080',
    ssl: false,
  });

  firebase.functions().useFunctionsEmulator('http://localhost:5001');
}

export { db };

Browser console

index.esm.js?abfd:106 [2020-05-30T03:18:23.148Z]  @firebase/firestore: Firestore (7.14.5): FirestoreClient Initializing. user= Jgjhmnb23JHFDTRGEYK5Jppwed
index.esm.js?abfd:106 [2020-05-30T03:18:23.162Z]  @firebase/firestore: Firestore (7.14.5): MemoryPersistence Starting transaction: Get last stream token
index.esm.js?abfd:106 [2020-05-30T03:18:23.164Z]  @firebase/firestore: Firestore (7.14.5): MemoryPersistence Starting transaction: Get next mutation batch
index.esm.js?abfd:106 [2020-05-30T03:18:23.166Z]  @firebase/firestore: Firestore (7.14.5): MemoryPersistence Starting transaction: Allocate target
index.esm.js?abfd:106 [2020-05-30T03:18:23.167Z]  @firebase/firestore: Firestore (7.14.5): MemoryPersistence Starting transaction: Execute query
index.esm.js?abfd:106 [2020-05-30T03:18:23.168Z]  @firebase/firestore: Firestore (7.14.5): IndexFreeQueryEngine Using full collection scan to execute query: Query(target=Target(categories, orderBy: [name (asc), __name__ (asc)]); limitType=F)
index.esm.js?abfd:106 [2020-05-30T03:18:23.173Z]  @firebase/firestore: Firestore (7.14.5): Connection Creating WebChannel: http://localhost:8000/google.firestore.v1.Firestore/Listen/channel [object Object]
index.esm.js?abfd:106 [2020-05-30T03:18:23.178Z]  @firebase/firestore: Firestore (7.14.5): Connection Opening WebChannel transport.
index.esm.js?abfd:106 [2020-05-30T03:18:23.180Z]  @firebase/firestore: Firestore (7.14.5): Connection WebChannel sending: {"database":"projects/vendida-a17e6/databases/(default)","addTarget":{"query":{"structuredQuery":{"from":[{"collectionId":"categories"}],"orderBy":[{"field":{"fieldPath":"name"},"direction":"ASCENDING"},{"field":{"fieldPath":"__name__"},"direction":"ASCENDING"}]},"parent":"projects/my-project-ha47s/databases/(default)/documents"},"targetId":2}}
index.esm.js?abfd:106 [2020-05-30T03:18:23.217Z]  @firebase/firestore: Firestore (7.14.5): Connection WebChannel transport opened.
index.esm.js?abfd:106 [2020-05-30T03:18:23.241Z]  @firebase/firestore: Firestore (7.14.5): Connection WebChannel received: {"targetChange":{"targetChangeType":"ADD","targetIds":[2]}}
index.esm.js?abfd:106 [2020-05-30T03:18:23.242Z]  @firebase/firestore: Firestore (7.14.5): Connection WebChannel received: {"targetChange":{"targetChangeType":"CURRENT","targetIds":[2],"resumeToken":"HGfhjBG7dfU56Gn=","readTime":"2020-05-30T03:18:23.208926Z"}}
index.esm.js?abfd:106 [2020-05-30T03:18:23.242Z]  @firebase/firestore: Firestore (7.14.5): Connection WebChannel received: {"targetChange":{"resumeToken":"YFgT/hjfF76fWj1=","readTime":"2020-05-30T03:18:23.209597Z"}}
index.esm.js?abfd:106 [2020-05-30T03:18:23.244Z]  @firebase/firestore: Firestore (7.14.5): MemoryPersistence Starting transaction: Get last remote snapshot version
index.esm.js?abfd:106 [2020-05-30T03:18:23.246Z]  @firebase/firestore: Firestore (7.14.5): MemoryPersistence Starting transaction: Apply remote event
index.esm.js?abfd:106 [2020-05-30T03:18:23.248Z]  @firebase/firestore: Firestore (7.14.5): MemoryPersistence Starting transaction: notifyLocalViewChanges

firestore-debug.log

May 30, 2020 1:08:25 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead
INFO: Detected non-HTTP/2 connection.
May 30, 2020 1:09:06 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead
INFO: Detected non-HTTP/2 connection.
May 30, 2020 1:09:25 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead
INFO: Detected non-HTTP/2 connection.

firebase-debug.log

[debug] [2020-05-30T03:10:25.924Z] May 30, 2020 1:10:25 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead
INFO: Detected non-HTTP/2 connection.
 {"metadata":{"emulator":{"name":"firestore"},"message":"May 30, 2020 1:10:25 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead\nINFO: Detected non-HTTP/2 connection.\n"}}
[debug] [2020-05-30T03:11:06.713Z] May 30, 2020 1:11:06 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead
INFO: Detected non-HTTP/2 connection.
 {"metadata":{"emulator":{"name":"firestore"},"message":"May 30, 2020 1:11:06 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead\nINFO: Detected non-HTTP/2 connection.\n"}}
[debug] [2020-05-30T03:11:25.949Z] May 30, 2020 1:11:25 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead
INFO: Detected non-HTTP/2 connection.
 {"metadata":{"emulator":{"name":"firestore"},"message":"May 30, 2020 1:11:25 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead\nINFO: Detected non-HTTP/2 connection.\n"}}