Firebase：No Firebase App '[DEFAULT]'が作成されました - Firebase App.initializeApp（）を呼び出してください

Question

私のReactアプリケーションとFirebaseを統合する際に問題があります。私は、アプリケーションを作成し、明白なバックエンドを持っているために、create-react-appを使用しました。

<!-- Firebase Services --> 
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase-app.js"></script> 
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase-auth.js"></script> 
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase-database.js"></script> 

<!-- ReactFire --> 
<script src="https://cdn.firebase.com/libs/reactfire/1.0.0/reactfire.min.js"></script> 

<script> 
    var config = { 
     apiKey: "***********************", 
     authDomain: "****************", 
     databaseURL: "******************", 
     projectId: "***********", 
     storageBucket: "*************", 
     messagingSenderId: "***********" 
    }; 

    firebase.initializeApp(config); 
</script> 

私のindex.htmlをするために、そしてとともに

handleSubmit(e) { 
      e.preventDefault(); 
      firebase.auth() 
      .createUserWithEmailAndPassword(this.state.emailValue, 
      this.state.passValue) 
      .catch((error) => { 
       console.error(error) 
      }) 
     } 

を呼び出すためにコンポーネント内import * as firebase from 'firebase';を試してみました：

は、これまで私が追加しました：

firebase.auth().onAuthStateChanged((user) => { 
if (user) { 
    console.log('user logged in') 
} else { 
    console.log('not logged in') 
}}) 

しかし、私はタイトルに記載されているエラーを与えています。

なぜこれが起こっているのか分かりませんし、firebaseとReactアプリケーションを正しく統合しているかどうかもわかりません。

私はReactFireを単独で使うべきでしょうか、それともユーザー認証のためにドキュメントで言うように設定しますか？

Answer 1

firebase.initializeApp（config）が動作していないため、Firebase init javascriptファイルをインポートしていません。個々のfirebaseサービスとは別に、initファイルも必要です。 https://github.com/firebase/quickstart-js/blob/master/auth/email.html#L35

Answer 2

私がやる方法は、libフォルダに別のfirebaseファイルを作成する方法です。

//lib/fire.js 
import firebase from 'firebase' 
const config = { 
     apiKey: "***********************", 
     authDomain: "****************", 
     databaseURL: "******************", 
     projectId: "***********", 
     storageBucket: "*************", 
     messagingSenderId: "***********" 
}; 

firebase.initializeApp(config); 

export const db = firebase.database() 
export const auth = firebase.auth() 

その後、私のコンポーネントで...

//component.js 
import React from 'react' 
import {auth} from '../lib/fire' 
export default class extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     email: '', 
     pass: '' 
    } 
    } 
    handleLogin() { 
    const { email, pass } = this.state 
    auth.signInWithEmailAndPassword(email, pass).then(user => { 
     <do something with user> 
    }).catch(err => console.log(err.message)) 
    } 
    render() { 
    return (
     <div>... form stuffs </div> 
    ) 
    } 
} 

明らかにあなたは、フォームの入力とすべてを処理する必要がありますが、私のポイントは、あなたが/このように認証またはデータベースを使用することができなければならないということです。これは普遍的に受け入れられている方法です。