Firebase：未創建Firebase應用'[DEFAULT]' - 致電Firebase App.initializeApp（）

Question

我在將Firebase與我的React應用集成時遇到問題。我使用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

我這樣做的方式是創建一個單獨的firebase文件，比如像lib這樣的文件夾。

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

顯然你需要處理表單輸入和一切，但我的觀點是，你應該/可以使用身份驗證或數據庫以這種方式。這似乎是這樣做的普遍接受的方式。