Firestore Bundling: db.loadBundle fails with error "[ReferenceError: Can't find variable: ReadableStream]"

[ankitmaloo]

Describe your environment

• Operating System version: Using javascript SDK in Expo React Native App
• Browser version: Using web SDK in an Expo React Native App
• Firebase SDK version: 8.2.3 (also tried with 8.6.3)
• Firebase Product: Firestore

Describe the problem:
I am using Bundling as described by the solution in the documentation here: https://firebase.google.com/docs/firestore/solutions/serve-bundles

It works well till hosting, the file is hosted on the web, and I can fetch it using fetch, but fails at this part of the code.
await db.loadBundle(resp.body);

Steps to Reproduce:

1. Follow the documentation on the link and create a binary as shown.
2. Host the binary somewhere.
3. When you are loading it into client, use the "db.loadBundle(resp.body) and see it fails with the above mentioned error.

Relevant Code:

async function fetchFromBundle() {
  // Fetch the bundle from Firebase Hosting, if the CDN cache is hit the 'X-Cache'
  // response header will be set to 'HIT'
  const resp = await fetch('/createBundle');

  // Load the bundle contents into the Firestore SDK
  await db.loadBundle(resp.body);  //This is the step where the error occurs. 

[dconeybe]

Hi @ankitmaloo. Could you enable Firestore debug logging, reproduce, and attach the resulting logs? Also, could you check the value of resp.status?

https://firebase.google.com/docs/reference/js/v8/firebase.firestore#setloglevel

[ankitmaloo]

Hi

resp.status is 200.

Attaching the logs as well.

firebaselogs.txt

I can somehow DM you the url as well if that helps.

[dconeybe]

Sure, you can DM me at my GitHub username @google.com. Or, you can just attach the response body here in the ticket, if its contents are suitable for being world-readable.

[dconeybe]

Also, I'm not personally familiar with Expo React Native; could you verify that ReadableStream is indeed available at all? Could you also try using resp.arrayBuffer() instead of resp.body?

[ankitmaloo]

Hi Denver

Sent you the url and the exact code on the email you mentioned.

Edit: With arrayBuffer, I get this Error: FileReader.readAsArrayBuffer is not implemented (probably not a firebase bug)

[dconeybe]

I've received your email. Thank you for the information.

Looking at your bundle, I see that it contains some Unicode characters that require multiple bytes when encoded via UTF-8, such as é and ✨. I wonder if this is a symptom of a bug in Firestore where it doesn't handle multibyte UTF-8 encodings of characters correctly.

While I investigate this, are you by chance able to try reproducing with a bundle that contains only ASCII characters? If not, that's fine too.

[ankitmaloo]

Tried it. Same error. No special characters. Just arrays that you see. (you can also see the new binary on the same link I sent you)

[dconeybe]

Hmm, okay so it looks like the multibyte UTF-8 character hypothesis was incorrect. Thanks for checking.

I can't reproduce this error using the Web SDK directly, so that means it may be something to do with Expo React Native. Could you first try upgrading to the latest version of the SDK, 8.10.0? If you're not too far along in your app's development, also consider switching to the modular v9 Firebase SDK because the v8 SDK is now just in maintenance mode.

Since I do not have experience with Expo React Native, would you be able to create a minimal app that reproduces the issue, such as in a GitHub repository that I can clone?

[ankitmaloo]

Let me check with 8.10.0. v9 modular could be difficult as there would be a lot of breaking changes.

Will share a repo for a minimal app with you in a day or so.

[ankitmaloo]

I debugged a bit further, this is what my response looks like:

bodyUsed: true
headers: Headers {map: {…}}
ok: true
status: 200
statusText: ""
type: "default"
url: <<redacted>>
_bodyBlob: Blob
_data: {size: 6338, blobId: '079501AF-961E-4110-B2D3-08389DF820A9', offset: 0, type: 'text/plain', name: 'createBundle.txt', …}
data: (...)
size: (...)
type: (...)
[[Prototype]]: Object
_bodyInit: Blob
_data: {size: 6338, blobId: '079501AF-961E-4110-B2D3-08389DF820A9', offset: 0, type: 'text/plain', name: 'createBundle.txt', …}
data: (...)
size: (...)
type: (...)
[[Prototype]]: Object
[[Prototype]]: Object

Any ideas? This looks different to what it shows up on web fetch.

[ankitmaloo]

Hi
So the thing is, the javascript used in React Native - Javascript Core or JSC - does not have inbuilt functions for encoding. So when I debug on Chrome, it works, but on runtime, it does not because JSC has no inbuilt functionality for encoding. (Chrome does so when debugging via chrome, it shows no error)

I used this link: https://stackoverflow.com/questions/55868484/referenceerror-cant-find-variable-textencoder as a reference, and this seems to work. Would still monitor this to see if it is indeed working as expected before moving it to production

[dconeybe]

@ankitmaloo It does indeed look like a polyfill is a feasible workaround. There is another customer report of a similar issue: #5838. Could you try the workaround documented there?

[ankitmaloo]

Hi,

That is the same workaround. JS Core does not have text encoders. I have to response.text() to get the response in right format, and then use encoder to encode it to Uint8Array. This worked. Would test thoroughly before moving to production.

[dconeybe]

Thanks for confirming. I'm going to close this issue as a duplicate of #5838 but feel free to re-open if you disagree.