如何解决反应中的以下错误 - 'Firebase：No Firebase App'[DEFAULT]' has been created'？答案

【问题标题】：How to solve the following error in react - ' Firebase: No Firebase App '[DEFAULT]' has been created '?如何解决反应中的以下错误 - 'Firebase：No Firebase App'[DEFAULT]' has been created'？
【发布时间】：2021-08-24 15:30:18
【问题描述】：

我在我的 react 应用程序中使用 firestore 数据库，并使用 firebase 初始化应用程序，我在我的 App.js 文件中使用 firebase.initializeApp()，如下所示-

import React from "react";
        
        import "./App.css";
        // firebase sdk-
        import firebase from "firebase/app";
        import "firebase/firestore";
        import "firebase/auth";
        // firebase hooks-
        import { useAuthState } from "react-firebase-hooks/auth";
       
    
    
    import ChatRoom from "./components/ChatRoom";
    import SignIn from "./components/SignIn";
    
    
    firebase.initializeApp({
     // app config goes here
    });
    
    
    const auth = firebase.auth();
    //const firestore = firebase.firestore();
    
    function App() {
      const [user] = useAuthState(auth);
       
      return (
        <div className="App">
          <header className="App-header"></header>
          <section>
            {user && <ChatRoom />}
            
            {!user && <SignIn />}
       
          </section>
        </div>
      );
    }
    
    export default App;

我收到Firebase: No Firebase App '[DEFAULT]' has been created 错误。我做错了什么？

【问题讨论】：

标签： reactjs firebase

【解决方案1】：

创建一个实用程序文件夹并导出必要的 Firebase 组件，以便在整个应用中导入，如下所示：

您传递给应用程序的配置也可能不正确

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/functions'
import 'firebase/storage'

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
})

const db = firebase.firestore()
const auth = app.auth()
const func = firebase.functions()
const storage = app.storage()


export { db, auth, func, storage, firebase }

【讨论】：