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

Question

I am trying to use firebase on my react native app. But it gives an error.

my App.js code is below

import React, { Component } from 'react';
import { Text } from 'react-native';
import firebase from 'firebase';

export default class HelloWorldApp extends Component {
  componentWillMount(){
    firebase.initializeApp({
      apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      authDomain: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      databaseURL: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      projectId: 'xxxxxxxxxxxxxxxxxxxx',
      storageBucket: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
      messagingSenderId: 'xxxxxxxxxx'
    })
  }

  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

What can I do? Thanks

Answer 1

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'