web-dev-qa-db-fra.com

Les objets ne sont pas valides en tant qu'enfants React (objet trouvé: objet avec des clés ($$ typeof, type, clé, ref, props, _owner, _store})

J'essaie d'utiliser firebase sur mon application native react. Mais cela donne une erreur .  Image is here

mon code App.js est ci-dessous

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>
    );
  }
}

Que puis-je faire? Merci

firebasereact-nativeecmascript-6react-native-android
6
fighg

J'ai eu ce problème aujourd'hui. J'ai couru un diff sur le code source entre 5.0.3 et 5.0.4 et ai constaté que les exportations ont changé. J'ai également constaté que si je modifie l'instruction d'importation comme suit, elle fonctionne avec la dernière version (5.3.0):

import firebase from '@firebase/app'

Si vous utilisez eslint, vous obtiendrez probablement une plainte lui indiquant qu'il devrait figurer dans les dépendances du projet, mais vous pouvez l'ignorer. 

Vous voudrez probablement aussi utiliser les fonctionnalités réelles de firebase plutôt que simplement l'importation principale. Par exemple, pour utiliser le module d'authentification, ajoutez les éléments suivants:

import '@firebase/auth'

14
GrokSrc

Je pense qu'il y a un problème avec [email protected]. Sur votre ligne de commande, exécutez npm install [email protected]. Cela a réglé le problème pour moi.

1
Bryan Mudge
I'm not sure what happened with this version [email protected]. I also faced this issue too. But there is a workaround to resolve this issue.

1st step: Remove your import statement: import firebase from 'firebase';

2nd step:

 1. Create a local function like this:

    initializeFirebase() {
    const firebase = require("firebase");

    // Initialize Firebase
    var config = {
        apiKey: 'apikey',
        authDomain: 'domain.com',
        databaseURL: 'databaseUrl',
        projectId: 'projectId',
        storageBucket: 'storageurl',
        messagingSenderId: 'senderId'
    };
    firebase.initializeApp(config);
  }

 2. Call it in your componentDidMount()

  componentDidMount() {
    this.initializeFirebase();
  }

Hope, it helps.
0
Va Visal

C'est un problème avec firebase version 5.0.6 alors que le passage à une version antérieure résoudra ce problème. Par exemple, essayez ceci

$ npm install --save [email protected]

Si la version 5.0.4 ne fonctionne pas non plus pour vous, essayez la version 4.9.1, car c’est ce que j’utilise et le problème a été résolu pour moi.

$ npm install --save [email protected]

0
Seema