"Image is not defined" error when using Cloud Firestore from React Native app

[mackenziemance]

[REQUIRED] Describe your environment

react-native: 0.47.2,
Firebase SDK version: 4.5.0
Firebase Product: cloud firestore_ (auth, database, storage, etc)

[REQUIRED] Describe the problem

Around 2 - 3 mins after I query firestore I'm getting a Image reference error

Code to reproduce:

db.collection("users").get().then((snap)=>{
snap.forEach((doc)=>{
console.log(doc.data())
})
})

console outputs

when signing out of auth

[mikelehen]

Thanks @mackenziemance. We have not invested in making the Firestore Web SDK work in React Native's javascript environment. To be honest, I'm not sure how much effort this will require.

Out of curiosity, have you considered using react-native-firebase? It supports Firestore (https://invertase.io/react-native-firebase/#/modules/firestore) and is built on top of the Android and iOS SDKs instead of the Web SDK so should be a bit more reliable.

[mikelehen]

Also, for curiosity's sake, does everything else seem to work fine until you get that error? Do queries and writes to Cloud Firestore successfully complete, etc.?

[mackenziemance]

Thanks for the support @mikelehen i guess since the rtdb always worked perf with this sdk I never took a look at the rn package, now I’ll switch. I’ve got docs, listend to changes, wrote with set/update/batch/transaction all seem to work. The only issues I ran into were the console.errors.

[mikelehen]

Cool, thanks for the info. I've started a discussion internally to see if we can get the 'Image is not defined' error fixed in the future.

[ricklove]

I am running into this error also. I get random Image reference errors after a period. Also, I get them any time I try to change the user.

The reason for using the WebSDK in react native is because of Expo. Expo allows building react-native projects (without an XCode or an Android project) and deploying them to the Expo app for testing on device. They do this by reusing their native build which already has selected plugins for react-native.

However, this framework only works with pure javascript (no plugins). So in order to use the Firebase native SDK, it would require "ejecting" from Expo which means generating your own XCode and Android projects and managing the plugins yourself (which loses all the primary benefits of managed plugins that Expo offers).

For me, the benefit of Expo is primary: being able to create a new app, publish it, and send a link to my client in a few hours.

Of course, Expo makes a perfect marriage with Firebase in general (with both I can build an entire app in a day).

I think Firestore is great, but it would be easier for me to roll my own backend then to replace Expo's excellent deployability at this time. For a temporary workaround, I'll probably use Cloud Functions to wrap my Firestore access, but I haven't figured out real time updates yet (and I lose the user based security model of Firestore)...

So, I hope that explains our situation and why it is worth supporting this scenario: there is a large potential audience segment who could fall under this category.

[ricklove]

Partial Workaround

I found that calling app.delete() and then recreating the app worked to allow me to change users:

    // First time
    let app = firebase.initializeApp(C.firebaseConfig);
    let firestore = firebase.firestore(app);
    let auth = firebase.auth(app);

    ...
    // Before Change User
    await app.delete();
    app = firebase.initializeApp(C.firebaseConfig);
    firestore = firebase.firestore(app);
    auth = firebase.auth(app);

[mikelehen]

[Reopening since hopefully we can fix this at some point]

As another workaround, you could try just creating a global 'Image' constructor. I haven't tried it, but I'd be curious if:

global.Image = function() { }

would avoid the reported crash.