Firebase：沒有創建 Firebase App '[DEFAULT]' - 調用 Firebase App.initializeApp() (app-compat/no-app)

Question

我正在使用 react js 構建一個畫廊程序，使用 firebase 作為后端。

但是我在 config.js 中遇到了一些錯誤和錯誤。 我已經在這里關注了一些問題，但對我沒有任何幫助。

所以這是我的 config.js：

// import firebase from 'firebase/app';
import firebase from 'firebase/compat/app';
// import { initializeApp } from 'firebase/app';
// import 'firebase/compat/auth';
// import 'firebase/compat/firestore';
import 'firebase/storage';
import 'firebase/firestore';
import 'firebase/compat/storage'


// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
// firebase.initializeApp();

  const projectStorage = firebase.storage();
  const projectFirestore = firebase.firestore();

  export { projectStorage, projectFirestore}

我得到的錯誤是： Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app)。

看到我評論了代碼，看到了一些錯誤，它仍然給我相同的結果。

注意：我使用的是 firebase ^9.16.0" React JS

Answer 1

我找到了解決我自己問題的方法。

因此，如果您使用的是版本 9 （在我的示例中為 firebase 9.16.0） ，那么您還必須添加import 'firebase/compat/firestore'; 不導入“firebase/firestore”；

這返回我TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.firestore is not a function

然后將初始化應用程序的方式更改為const app = initializeApp(firebaseConfig); 到firebase.initializeApp(firebaseConfig)；

現在它在我的項目中運行良好。

我的最終代碼如下，您可以在問題中看到上述代碼之間的不同：

import firebase from 'firebase/compat/app';
import "firebase/database"
import 'firebase/storage';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';


// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "your api",
  authDomain: "your domain",
  projectId: "your project id",
  storageBucket: "your storage",
  messagingSenderId: "your id",
  appId: "your app id"
};

// Initialize Firebase
// const app = initializeApp(firebaseConfig);
firebase.initializeApp(firebaseConfig);

  const projectStorage = firebase.storage();
  const projectFirestore = firebase.firestore();

  export { projectStorage, projectFirestore}