如何解决Firebase的错误：No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)？

Question

我正在尝试使用React和Firebase创建聊天室应用程序。最初，我在同时导入auth和firestore时遇到错误，即 import { auth, firestore } from 'react';，我尝试了 firebase.auth(); 和 firebase.firestore();，但是我收到了一个错误，指出“auth未定义no-def”和“firestore未定义no-def”。现在我尝试了 const auth = firestore.auth(); 和 const firestore = firebase.firestore()，但是我现在收到一个错误“Firebase: 未创建Firebase应用程序'[DEFAULT]' - 调用Firebase App.initializeApp() (app/no-app)。”...能否有人帮助我？

以下是我的代码：

import firebase from 'firebase';
//import 'firebase/app';
//import { auth, firestore } from 'firebase';
//firebase.auth();
//firebase.firestore();
const auth = firebase.auth();
const firestore = firebase.firestore()

export const signup = (user) => {

    return async (dispatch) => {

        const db = firestore();
        auth()
        .createUserWithEmailAndPassword(user.email, user.password)
        .then(user => {
            console.log(user); 
        })
        .catch(error => {
            console.log(error);
        })

    }
}

- jamal kasule

---

请仔细检查您的导入是否以某种方式使用了 Firebase。我有一个 Vue3 项目，在创建 Vue3 应用程序之前初始化了 Firebase，就像您在 React 中一样。但在我的情况下，我有一个导入导入了其他类，并且其中一个类使用了 Firebase。 - aProgger

Answer 1

尝试在index.js中导入Firebase配置文件。

import firebase.js

- Mayank Agrawal

Answer 2

在使用任何Firebase SDK之前，您需要初始化Firebase应用程序。

以下代码显示了如何初始化应用程序：

import firebase from "firebase/app";


// Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

不要忘记使用你的Firebase项目配置替换这些配置。 在这里，您可以查看如何获取Firebase配置。

之后，您可以运行代码。

请确保在使用任何SDK之前调用初始化。为此，我还建议将您的代码更改为以下内容：

import firebase from 'firebase';
//import 'firebase/app';
//import { auth, firestore } from 'firebase';
//firebase.auth();
//firebase.firestore();


export const signup = (user) => {

    return async (dispatch) => {
       const auth = firebase.auth();
       const firestore = firebase.firestore()

        const db = firestore();
        auth()
        .createUserWithEmailAndPassword(user.email, user.password)
        .then(user => {
            console.log(user); 
        })
        .catch(error => {
            console.log(error);
        })

    }
}

- Tarik Huber

---

我已经初始化了我的Firebase应用程序。 - jamal kasule

就像您注册的方式一样精确无误地列出您的方式。 - jamal kasule

`//Web App's firebase configuration const firebaseConfig = { apiKey: "AIzaSyAuSFNSSRyiscvEG1QWxq0CMW9hJ9DqBec", authDomain: "learn-581c8.firebaseapp.com", projectId: "learn-581c8", storageBucket: "learn-581c8.appspot.com", messagingSenderId: "443182491044", appId: "1:443182491044:web:fdfe00e957e98455794d31", measurementId: "G-T858M7FKTK" };//export auth = firebase.auth(); //export default firebase;firebase.initializeApp(firebase.config)window.store = store;` - jamal kasule

@jamalkasule 你在测试组件中初始化它了吗？假设你正在使用React Router或其他东西。 - Dharmaraj

这听起来像是初始化和您的应用程序调用Firebase方法之间的竞争条件。 - DIGI Byte

Answer 3

我也无缘无故地遇到了这个问题

通过在根应用程序中导入带有您凭据的配置文件，解决了此问题

import app from './firebase/config'
console.log('app :', app);

- NaturalMonk92

Answer 4

我有同样的问题

const app = initializeApp(firebaseConfig);

如果您在同一文件中导入其他内容（例如provider、auth、getAuth等），请确保此代码位于任何其他内容之上。只要是您调用的任何其他方法...

- Oliyide Ibrahim

---

这并不真正回答问题。如果你有其他问题，你可以点击提问。如果你想在有新回答时收到通知，你可以关注这个问题。一旦你获得足够的声望，你也可以添加悬赏来引起更多关注。- 来自评论 - Kumar Saurabh