Firebase initialization problem in reactJS

Question

I am trying to use Firebase in an app component. This is how the code looks like for that component (removed the api details from json while posting here).

import React from "react";
import * as firebase from "firebase";

const New_meet =() =>{
    
    var firebaseConfig={
        apiKey: ,
        authDomain: ,
        databaseURL: ,
        projectId: ,
        storageBucket: ,
        messagingSenderId: ,
        appId: ,
        measurementId: 
    };
    
    console.log("here");
    firebase.initializeApp(firebaseConfig);
    
    const preObject = document.getElementById('object');
    const dbRefObject = firebase.database().ref().child('object');
    dbRefObject.on('value',snap=>console.log(snap.val()));
    
    return(
        <div>
            <p id="object"></p>
        </div>
    );
}

export default New_meet;

The problem is, when I insert that firebaseInitializeApp function(already present for now), it gives the error

"Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)."

And when I remove that line, it shows

 "Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)"

I am not importing firebase in App.js or any other components. Have never used Firebase before so no clue how to tackle this.

try moving your firebaseConfig and initializeApp method outside/before the component — wdm
– wdm, Commented Sep 26, 2020 at 6:59
On every update, it's going to initialize, the firebase, but you have to do that only once, don't know the structure, but just like redux store we initialize that once, you have to do prevent that re-initialization. — Vaibhav Rai
– Vaibhav Rai, Commented Sep 26, 2020 at 7:01
@VaibhavRai Any ideas on how it's done? I have never used firebase before, and can only find android solutions online, not javascript. — tcmsh
– tcmsh, Commented Sep 26, 2020 at 7:14
@wdm that worked! although snap updates are not happening, but maybe that error is in my code. I will figure that out.Thanks a lot!!! — tcmsh
– tcmsh, Commented Sep 26, 2020 at 7:19
@VaibhavRai yeah that works, along with moving the config json and initialize method outside the component, as mentioned by wdm. — tcmsh
– tcmsh, Commented Sep 26, 2020 at 8:30

Prateek Thapa · Accepted Answer · 2020-09-26 07:24:02Z

2

Seems like you're using a new instance of the firebase app every time the module reloads.

You have to initialize your firebase once and use the instance throughout your app.

Create a new file where you could initialize firebase and use it throughout the app.

firebase.js

import firebase from 'firebase';

try {
   firebase.initializeConfig({ /* Config here* /})
} catch(err) {
   // swallow the error
   console.log(err)
}

/* use this firebase in your project. */
export default firebase;

answered Sep 26, 2020 at 7:24

Prateek Thapa

4,9481 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Firebase initialization problem in reactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related