I am facing an issue with connecting to two firebases within the same project.
In my project, I have two javascript files that connect to each firebase separately, which seems fine.
Here is how I import them:
import db from '../FireBase'
import mdb from '../MissionFireBase'
let MissionRef = mdb.ref('mission');
let TeamRef = db.ref('Teams');
let StartRef = db.ref('start');
Each firebase (db and mdb) works individually, but when I try to use both of them together, I encounter an error:
index.cjs.js?3b8b:360 Uncaught FirebaseError {code: "app/duplicate-app", message: "Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).", name: "[DEFAULT]", stack: "[DEFAULT]: Firebase: Firebase App named '[DEFAULT]…0)↵ at fn (http://localhost:8080/app.js:89:20)"}
It appears that there is a conflict because somewhere along the line, Firebase gets assigned a default ID. Even when I call each one from a different Vue component, the same error persists.
This is how the firebase connection is established:
import Firebases from 'firebase'
let config = {
apiKey: "--",
authDomain: "--",
databaseURL: "--",
projectId: "--",
storageBucket: "--",
messagingSenderId: "--"
};
let apps= Firebases.initializeApp(config);
let mdb = apps.database();
export default mdb
My question is, is it possible to make two different firebase calls in this scenario, or do I need to merge them into a single connection?
Thank you.