reactjs - Getting "app is not defined" error after applying "Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)." error fix

Question

At first I was getting the "Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app)." error. I saw online that wrapping firebase initialization with "if (!firebase.apps.length) {}" would fix the problem. Now I'm getting an error that says "app is not defined". How do I work around this?

import firebase from "firebase/app";
import "firebase/auth";

if (!firebase.apps.length) {
    const app = firebase.initializeApp({
     apiKey: "process.env.REACT_APP_FIREBASE_API_KEY",
     authDomain: "process.env.REACT_APP_FIREBASE_AUTH_DOMAIN",
     projectId: "process.env.REACT_APP_FIREBASE_PROJECT_ID",
     storageBucket: "process.env.REACT_APP_FIREBASE_STORAGE_BUCKET",
     messagingSenderId: "process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID",
     appId: "process.env.REACT_APP_FIREBASE_APP_ID"
   });
}
export const auth = app.auth();
export default app;

question from:https://stackoverflow.com/questions/65650709/getting-app-is-not-defined-error-after-applying-firebase-firebase-app-named

Answer 1

I solved the issue this way :

 let firebaseApp ;

  if (!firebase.apps.length) {
     firebaseApp = firebase.initializeApp(firebaseConfig);
  }
  else {
    firebaseApp = firebase.app(); // if already initialized, use that one
  }

  export const auth = app.auth();
  export default app;

The problem here is you are defining const app = ... but it gets defined only for the if scope ( it's how it works in js ). That's why initialize a variable using let and then assign values to it