Using useFetchStreams option in Firestore results in WebChannel transport error

[BayanBennett]

[REQUIRED] Describe your environment

• Operating System version: Windows 10 Pro 21390.2025
• Browser version: Google Chrome 91.0.4472.114
• Firebase SDK version: 9.0.0-beta.5
• Firebase Product: firestore

I am currently using ReactJS 17 and NextJS 10. I don't believe these are contributing to the issue.

[REQUIRED] Describe the problem

Using useFetchStreams results in the following error:

@firebase/firestore: Firestore (9.0.0-beta.5): Connection WebChannel transport errored:

{ "type": "c", "target": { ... }, "defaultPrevented": false, "status": 1 }

{
  "type": "c",
  "target": {
    "j": false,
    "c": {
      "a": {
        "a": [
          {
            "proxy": null,
            "type": "a",
            "capture": false,
            "key": 19,
            "Z": false,
            "Y": false
          }
        ],
        "b": [
          {
            "proxy": null,
            "type": "b",
            "capture": false,
            "key": 20,
            "Z": false,
            "Y": false
          }
        ],
        "c": [
          {
            "proxy": null,
            "type": "c",
            "capture": false,
            "key": 21,
            "Z": false,
            "Y": false
          }
        ],
        "d": [
          {
            "proxy": null,
            "type": "d",
            "capture": false,
            "key": 22,
            "Z": false,
            "Y": false
          }
        ]
      },
      "b": 4
    },
    "D": null,
    "a": {
      "qa": 0,
      "g": [],
      "c": {
        "a": true
      },
      "l": null,
      "O": {
        "X-Goog-Api-Client": "gl-js/ fire/9.0.0-beta.5",
        "Content-Type": "text/plain",
        "X-Firebase-GMPID": "▮▮▮▮▮",
        "Authorization": "Bearer ▮▮▮▮▮"
      },
      "i": "$httpHeaders",
      "V": {
        "database": "projects/▮▮▮▮▮/databases/(default)"
      },
      "A": "gsessionid",
      "oa": null,
      "a": null,
      "ga": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel",
      "B": {
        "f": "https",
        "j": "",
        "c": "firestore.googleapis.com",
        "h": null,
        "g": "/google.firestore.v1.Firestore/Write/channel",
        "i": "",
        "a": false,
        "b": {
          "a": {
            "b": {
              "database": [
                "projects/▮▮▮▮▮/databases/(default)"
              ],
              "VER": [
                8
              ]
            },
            "a": [
              "database",
              "VER"
            ],
            "c": 2
          },
          "b": 2,
          "c": null,
          "f": false
        }
      },
      "ma": null,
      "ha": null,
      "R": 44102,
      "Pa": 1,
      "Ma": false,
      "f": {},
      "h": null,
      "j": null,
      "m": null,
      "G": false,
      "S": false,
      "P": -1,
      "pa": -1,
      "I": -1,
      "u": 0,
      "o": 0,
      "T": 0,
      "Ia": 5000,
      "Sa": 10000,
      "Na": 2,
      "na": 600000,
      "Oa": {
        "f": {},
        "b": {}
      },
      "C": true,
      "J": "",
      "b": {
        "g": 10,
        "f": 1,
        "a": null,
        "b": null,
        "c": []
      },
      "la": {
        "a": {}
      },
      "ea": false,
      "Ja": false,
      "U": false,
      "N": 0,
      "F": false,
      "s": null,
      "La": false,
      "v": 0
    },
    "g": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel",
    "o": true,
    "m": true
  },
  "defaultPrevented": false,
  "status": 1
}

Steps to reproduce:

Instead of using getFirestore use initializeFirestore. Set useFetchStreams to true.

Relevant Code:

const firebaseApp = initializeApp(firebaseConfig);

const firestore = initializeFirestore(firebaseApp, {
  useFetchStreams: true, // commenting out this line works
});

addDoc(collection(firestore, "cities"), {
  name: "Tokyo",
  country: "Japan",
})
  .then(console.log)
  .catch(console.error);

Just to cover all possibilities, I tried using experimentalForceLongPolling as suggested here: #4859, which didn't work

Relevant Issues	Relevant PRs
#4912	#4939, #5046, #5099

[schmidt-sebastian]

This will be fixed with the next release of firebase@beta.

[Feiyang1]

It has been fixed in [email protected].

@schmidt-sebastian Do you want to add useFetchStream to FirestoreSettings? It currently is not exposed in our typings.
Or do you want to change to use fetch by default?

[BayanBennett]

Works for me!

Thank you 🙏 😊

[schmidt-sebastian]

I would like to turn it on by default.