FR: Use fetch() in v9 instead of XMLHttpRequest

[satyarohith]

I'm trying to use firebase v9 beta SDK with Deno. But the new v9 version uses legacy XMLHttpRequest which isn't supported on Deno. I'm curious if it is possible to migrate to fetch() for the new v9 version.

I used the following code.

import { initializeApp } from "https://cdn.skypack.dev/[email protected]/app";
import {
  collection,
  getDocs,
  getFirestore,
  query,
  where,
} from "https://cdn.skypack.dev/[email protected]/firestore";

const firebaseConfig = {
  /* Your config. */
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const q = query(collection(db, "cities"), where("capital", "==", true));
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  console.log(doc.id, " => ", doc.data());
});

The error I get when I run the above code:

 error: Uncaught ReferenceError: XMLHttpRequest is not defined
  this.a = new XMLHttpRequest();
               ^
    at X.h.ba (https://cdn.skypack.dev/-/@firebase/[email protected]/dist=es2020,mode=imports/optimized/@firebase/webchannel-wrapper.js:1621:16)
    at lc (https://cdn.skypack.dev/-/@firebase/[email protected]/dist=es2020,mode=imports/optimized/@firebase/webchannel-wrapper.js:944:94)
    at jc (https://cdn.skypack.dev/-/@firebase/[email protected]/dist=es2020,mode=imports/optimized/@firebase/webchannel-wrapper.js:930:3)
    at Dd.h.Ba (https://cdn.skypack.dev/-/@firebase/[email protected]/dist=es2020,mode=imports/optimized/@firebase/webchannel-wrapper.js:1937:88)
    at Fb (https://cdn.skypack.dev/-/@firebase/[email protected]/dist=es2020,mode=imports/optimized/@firebase/webchannel-wrapper.js:661:11)

[Feiyang1]

It seems you are pulling the browser bundle from firestore. You probably should use the nodejs bundle pointed by the main field in deno. The nodejs build uses grpc-js instead.

We only provide a cjs build for nodejs, so I'm not sure if you can use it from skypack.
Assuming we will add a nodejs build in esmodule format, is it possible to configure skypack to point to this field (say main-module)?

[satyarohith]

Assuming we will add a nodejs build in esmodule format, is it possible to configure skypack to point to this field (say main-module)?

I don't think nodejs build would work with Deno. The reason for using a browser bundle is that Deno supports most of the browser APIs. And the first error I faced during my attempt to use firebase SDK in Deno is the above error.

[Feiyang1]

Interesting! The error came from webchannel which is our transport layer and is an external dependency, so I'm afraid we won't be able to switch to fetch anytime soon.

@schmidt-sebastian Can you think of any workarounds? Does the long polling mode also depend on webchannel?

[schmidt-sebastian]

As far as I am aware, the GRPC team is working on adding an option to only use fetch. Let me confirm what the status is.

[schmidt-sebastian]

Our networking library includes experimental support. I will try to see what happens when we turn it on :)