Объекты недопустимы как дочерние элементы React (найденный объект: объект с ключами ($$ typeof, type, key, ref, props, _owner, _store})

Question

Я пытаюсь использовать firebase в своем приложении реакции на родную.Но это дает ошибку.

мой код App.js ниже

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

Что я могу сделать?Спасибо

Answer 1

Это проблема с Firebase версии 5.0.6, тогда как снижение до версии решит эту проблему. Например, попробуйте это

$ npm install --save firebase@5.0.4

ЕслиВерсия 5.0.4 также не работает для вас, чем попробуйте версию 4.9.1, так как это то, что я использую, и это решило эту проблему для меня

$ npm install --save firebase@4.9.1

Answer 2

I'm not sure what happened with this version firebase@5.0.4. 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.

Answer 3

У меня была эта проблема сегодня.Я запустил diff для исходного кода между 5.0.3 и 5.0.4 и обнаружил, что экспорт изменился.Я также обнаружил, что если я изменю оператор импорта на следующий, он будет работать с последней версией (5.3.0):

import firebase from '@firebase/app'

Если вы используете eslint, вы будетеВозможно, вы получите жалобу на то, что она должна быть указана в зависимости проекта, но вы можете игнорировать это.

Возможно, вы также захотите использовать реальные возможности Firebase, а не только импорт ядра.Например, чтобы использовать модуль аутентификации, вы должны добавить следующее:

import '@firebase/auth'

Answer 4

Я думаю, что есть проблема с firebase@5.0.4.В командной строке запустите npm install firebase@5.0.3.Это исправило это для меня.