Firebase-js-sdk: 5.0.4 release breaks React Native (Android only)

[kellytowle]

[REQUIRED] Describe your environment

• Operating System version: Android 8.1.0 (using React Native)
• Firebase SDK version: 5.0.4
• Firebase Product: project initialization / module import
  

[REQUIRED] Describe the problem

When pulling latest firebase module via NPM into a project works fine for iOS but breaks on Android (tested on an 8.1.0 device & 6.0 simulator, with same results).

Presented with the error: "Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store})..."

Error is avoidable either by commenting out the import line in JS code _or_ by explicitly requesting [email protected]

Steps to reproduce:

1. Run react-native init firebaseTest
2. cd ./firebaseTest
3. Run npm i --save firebase
4. Add import for firebase to App.js (or copy/paste below code sample over entire file)
5. Run react-native run-ios and see that it loads without issue
6. Run react-native run-android (after opening ./android in Android Studio to auto-configure build) and see that it presents the error listed up top
7. Either comment out the import, or run npm i --save [email protected] and re-run react-native run-android to see that the error has gone away.

Relevant Code (App.js file in a fresh React Native project):

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import firebase from 'firebase'; // Comment this line or force version 5.0.3 to see the problem disappear

class App extends Component {
    render() {
        return (
            <View>
                <Text>I work in iOS with firebase version 5.0.4, but not in Android</Text>
            </View>
        )
    }
}

export default App;

[google-oss-bot]

Hey there! I couldn't figure out what this issue is about, so I've labeled it for a human to triage. Hang tight.

[mfaheemakhtar]

I've Android 5.1 with Windows 8.1 64 bit.

Getting the same error as @kellytowle has described.

5.0.3 works fine.

[Zohaibmalikdev]

getting same error as @kellytowle, having the same issue with firebase 5.0.4, reverting back to version 5.0.2 solved the error and my react-native app works fine.

[alexpavlovaskblue]

Reverting back to version 5.0.3 (Windows 10), is OK for me.

[paullyFIRE]

Huge thanks, @kellytowle.

Downgrading to 5.0.3 also fixed the issue with me.

Standard react-native init app.

"firebase": "^5.0.3",
"react": "^16.3.1",
"react-native": "0.55.4",

[GenDecoder]

Actually while using a node version at around 8.x.x I faced the same issue, but upgrading to the latest version of node it works. I am using the 10.4.1. but It seems to work even with 9.x.x versions.

PD: This without downgrading the firebase version, I have kept with the 5.0.4.
My environment: (Windows 10, android)

[kellytowle]

Interesting - I'll give that a shot this evening. Not on the same machine
at present but I'm pretty sure I was on 8.9.x as well.

Still, given that the problem was introduced with the 5.0.4 release of the
firebase module and that node 8 is the current LTS version, I still feel
like someone should investigate what changed in the 5.0.4 update that
caused this issue.

On Fri, Jun 15, 2018, 10:45 AM Mario Victor Medrano Maldonado <
[email protected]> wrote:

Actually while using a node version at around 8.x.x I faced the same
issue, but upgrading to the latest version of node it works. I am using the
10.4.1. but It seems to work even with 9.x.x versions.

PD: This without downgrading the firebase version, I have kept with the
5.0.4.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-js-sdk/issues/871#issuecomment-397694346,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEsj-B9i1KSc4xv5Dsvp1fJR3z45OM3Mks5t8_K1gaJpZM4UPH-L
.

[D4G4]

Is there any way we can downgrade our Firebase version?

[mfaheemakhtar]

@D4G4 , The first result on Google shows:
npm install [email protected]

So, you can use the below one to downgrade to 5.0.3
npm install [email protected]

[gianpaoloriva]

confirm downgrade to 5.0.3

[alexd-3d]

Same issue even with Firebase 5.1.0
+1 "confirm downgrade to 5.0.3"

[rakafaProg]

This is some crazy issue...
Thank you all, indid downgrading to 5.0.3 fixes the problem.
helped me a lot!!

[jshcrowthe]

Hey all, it seems like this issue is another recurrence of this issue logged to the react folks: https://github.com/facebook/react/issues/8379#issuecomment-264858787

tl;dr Load Firebase (at least firebase/app) first, as we polyfill some APIs functionality, and things should work fine.

In order to ensure that our SDK is consistent across environments, we load Polyfills for certain APIs in the event that they are missing (see: https://www.npmjs.com/package/@firebase/polyfill). Loading the Symbol Polyfill is something that, if not done before react loads, causes future react to not recognize its own components and to throw the types of errors you are seeing.

To circumvent this you can load Firebase (which loads these polyfills) before you load other code. As of yet, Firebase does not ship a distro w/o these polyfills, but once we do, you could alternately use that and the load order will not matter any longer.

[berpcor]

confirm downgrade to 5.0.3

[naftalibeder]

confirm downgrade to 5.0.3!

[alexd-3d]

Indeed if you do want to use latest firebase code - @jshcrowthe advice helped. Just throw "import firebase from 'firebase';" at the very beginning of your App's index.js (eslinter will hint you that you have unused variable though - but it will do it's job anyway)

[tohami]

confirm downgrade to 5.0.3!

[groksrc]

I had this problem today. I ran a diff on the source code between 5.0.3 and 5.0.4 and found that the exports have changed. I also found that if I change the import statement to the following that it works with the latest version (5.3.0):

import firebase from '@firebase/app'

If you're using eslint you'll probably get a complaint that it should be listed in the project dependencies, but you can ignore that.

You'll probably also want to use the actual features of firebase rather than just the core import. For example, to use the authentication module you'd add the following:

import '@firebase/auth'

[Chaldish]

I had a same problem with "firebase".
I did @kellytowle what he said.
And it's work.

[Syphonjr]

The issue still persists in 5.5.1

[geraldhemmers]

with 5.5.1 the solution of @groksrc works also as a charm Thanks!