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}