CODEWITHSUNDEEP
reactjsfirebase
Mohaned Ali
Mohaned Ali

Reputation: 27

React - Firebase _ Error: Firebase App named '[DEFAULT]' already exists

I'm a beginner in React and at the moment I try to connect my first app to a Firebase database. i have this is problem and i don't know how to solve it i tried this is solve but i didn't know where to put it so anyone can help me

if (!firebase.apps.length) {
    firebase.initializeApp({});
}

and this is my code

import React, { useState, useEffect } from "react";
import Note from "./components/Note/Note";
import NoteForm from "./components/NoteForm/NoteForm";
import { DB_CONFIG } from "./components/config/config";
import firebase from "firebase/app";
import "firebase/database";
import "./App.css";

function App() {
  // Intialize Firebase
  const firebaseApp = firebase.initializeApp(DB_CONFIG);
  const db = firebaseApp
    .database()
    .ref()
    .child("notes");
  // State Of Project
  const [notes, setNotes] = useState([]);
  // UseEffect
  useEffect(() => {
    db.on("child_added", snap => {
      const notesState = [...notes, { id: snap.key, title: snap.val().title }];
      setNotes(notesState);
    });
  });
  // Add Note Function
  const addNote = note => {
    db.push().set({ title: note });
  };
  return (
    <div className="notesWrapper">
      <div className="notesHeader">
        <div className="heading">React Firebase Notes</div>
      </div>
      <div className="notesBody">
        {notes.map(note => (
          <Note key={note.id} note={note} />
        ))}
      </div>
      <div className="notesFooter">
        <NoteForm addNote={addNote} />
      </div>
    </div>
  );
}

export default App;

Upvotes: 1

Views: 967

Answers (2)

Tunmise Ogunniyi
Tunmise Ogunniyi

Reputation: 2573

The reason for the error: When you initialize the same firebase app(whose name is "DEFAULT" in this case) multiple times, that's the typical error you get. The multiple initializations is happening because the components itself re-renders multiple times.

The Fix: The easiet way to fix this is what you are already about to do, checking for the apps lengths before initializing the app. You can move the check for app length into your functional component: 

import React, { useState, useEffect } from "react";
import Note from "./components/Note/Note";
import NoteForm from "./components/NoteForm/NoteForm";
import { DB_CONFIG } from "./components/config/config";
import firebase from "firebase/app";
import "firebase/database";
import "./App.css";

function App() {
  // Intialize Firebase if it has not been previously initialized
  if (!firebase.apps.length) {
    firebase.initializeApp({});
  }

  const db = firebase
    .database()
    .ref()
    .child("notes");

  // ... The rest of your code
}

export default App;

Notes:

  • You don't need to store a reference to the initialization of firebase

Upvotes: 1

j0nezz
j0nezz

Reputation: 104

This happens most likely because you initialize the app each time when your App component rerenders. Try to initialize firebase outside the component.

Edit:

import Note from "./components/Note/Note";
import NoteForm from "./components/NoteForm/NoteForm";
import { DB_CONFIG } from "./components/config/config";
import firebase from "firebase/app";
import "firebase/database";
import "./App.css";

// move this outside the component
const firebaseApp = firebase.initializeApp(DB_CONFIG);


function App() {
  // Intialize Firebase
  const db = firebaseApp
    .database()
    .ref()
    .child("notes");
  // State Of Project
  const [notes, setNotes] = useState([]);
  // UseEffect
  useEffect(() => {
    db.on("child_added", snap => {
      const notesState = [...notes, { id: snap.key, title: snap.val().title }];
      setNotes(notesState);
    });
  });
  // Add Note Function
  const addNote = note => {
    db.push().set({ title: note });
  };
  return (
    <div className="notesWrapper">
      <div className="notesHeader">
        <div className="heading">React Firebase Notes</div>
      </div>
      <div className="notesBody">
        {notes.map(note => (
          <Note key={note.id} note={note} />
        ))}
      </div>
      <div className="notesFooter">
        <NoteForm addNote={addNote} />
      </div>
    </div>
  );
}

export default App;

Upvotes: 0

Related Questions