Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

5.0.4 release breaks React Native (Android only) #871

Closed
ghost opened this issue May 27, 2018 · 21 comments
Closed

5.0.4 release breaks React Native (Android only) #871

ghost opened this issue May 27, 2018 · 21 comments

Comments

@ghost
Copy link

ghost commented May 27, 2018

[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 firebase@5.0.3

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 firebase@5.0.3 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
Copy link
Contributor

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
Copy link

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
Copy link

Zohaibmalikdev commented Jun 1, 2018

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
Copy link

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

@paullyFIRE
Copy link

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",

@caifel
Copy link

caifel commented Jun 15, 2018

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)

@ghost
Copy link
Author

ghost commented Jun 15, 2018 via email

@D4G4
Copy link

D4G4 commented Jun 16, 2018

Is there any way we can downgrade our Firebase version?

@mfaheemakhtar
Copy link

@D4G4 , The first result on Google shows:
npm install lodash@4.17.4

So, you can use the below one to downgrade to 5.0.3
npm install firebase@5.0.3

@gianpaoloriva
Copy link

confirm downgrade to 5.0.3

@alexd-3d
Copy link

alexd-3d commented Jun 25, 2018

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

@rakafaProg
Copy link

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

@jshcrowthe
Copy link
Contributor

jshcrowthe commented Jun 29, 2018

Hey all, it seems like this issue is another recurrence of this issue logged to the react folks: facebook/react#8379 (comment)

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
Copy link

berpcor commented Jul 3, 2018

confirm downgrade to 5.0.3

@naftalibeder
Copy link

confirm downgrade to 5.0.3!

@alexd-3d
Copy link

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
Copy link

tohami commented Jul 22, 2018

confirm downgrade to 5.0.3!

@groksrc
Copy link

groksrc commented Jul 29, 2018

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'

@chaldishx
Copy link

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

@Syphonjr
Copy link

The issue still persists in 5.5.1

@geraldhemmers
Copy link

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

@firebase firebase locked and limited conversation to collaborators Oct 19, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests