'Removing firestore from Vue project but retaining firebase auth

I'm switching from Firestore to MongoDB, and I'm now trying to remove references to it in my App.vue file. I'm still using Firebase auth.

Where it says this in the console error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeMount hook: "FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

My beforeMount() never had App.initializeApp(), and I'm trying to figure out where that needs to go, but nothing is working. I'm really puzzled as to why this one component is not behaving as expected after removing references to Firestore, as all my other components worked fine. Any advice is greatly appreciated.

Full console error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeMount hook: "FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)."

found in

---> <Index> at src/components/Index.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1893
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1871
callHook @ vue.runtime.esm.js?2b0e:4235
mountComponent @ vue.runtime.esm.js?2b0e:4058
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
merged @ vue.runtime.esm.js?2b0e:3322
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
patch @ vue.runtime.esm.js?2b0e:6560
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ vue-router.esm.js?8c4f:2989
eval @ vue-router.esm.js?8c4f:2988
updateRoute @ vue-router.esm.js?8c4f:2409
eval @ vue-router.esm.js?8c4f:2263
eval @ vue-router.esm.js?8c4f:2397
step @ vue-router.esm.js?8c4f:2001
step @ vue-router.esm.js?8c4f:2008
runQueue @ vue-router.esm.js?8c4f:2012
eval @ vue-router.esm.js?8c4f:2392
step @ vue-router.esm.js?8c4f:2001
eval @ vue-router.esm.js?8c4f:2005
eval @ vue-router.esm.js?8c4f:2379
eval @ vue-router.esm.js?8c4f:2127
eval @ vue-router.esm.js?8c4f:2203
Promise.then (async)
eval @ vue-router.esm.js?8c4f:2150
eval @ vue-router.esm.js?8c4f:2171
eval @ vue-router.esm.js?8c4f:2171
flatMapComponents @ vue-router.esm.js?8c4f:2170
eval @ vue-router.esm.js?8c4f:2106
iterator @ vue-router.esm.js?8c4f:2357
step @ vue-router.esm.js?8c4f:2004
step @ vue-router.esm.js?8c4f:2008
runQueue @ vue-router.esm.js?8c4f:2012
confirmTransition @ vue-router.esm.js?8c4f:2387
transitionTo @ vue-router.esm.js?8c4f:2260
init @ vue-router.esm.js?8c4f:2980
beforeCreate @ vue-router.esm.js?8c4f:1298
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
callHook @ vue.runtime.esm.js?2b0e:4235
Vue._init @ vue.runtime.esm.js?2b0e:5018
Vue @ vue.runtime.esm.js?2b0e:5099
eval @ main.js?56d7:30
./src/main.js @ app.js:1225
__webpack_require__ @ app.js:854
fn @ app.js:151
1 @ app.js:1262
__webpack_require__ @ app.js:854
checkDeferredModules @ app.js:46
(anonymous) @ app.js:994
(anonymous) @ app.js:997
vue.runtime.esm.js?2b0e:1897 FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
    at app (index.esm.js?cc84:356:1)
    at Object.serviceNamespace [as auth] (index.esm.js?cc84:406:1)
    at VueComponent.beforeMount (Index.vue?b484:544:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
    at callHook (vue.runtime.esm.js?2b0e:4235:1)
    at mountComponent (vue.runtime.esm.js?2b0e:4058:1)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8459:1)
    at init (vue.runtime.esm.js?2b0e:3137:1)
    at merged (vue.runtime.esm.js?2b0e:3322:1)
    at createComponent (vue.runtime.esm.js?2b0e:6022:1)
logError @ vue.runtime.esm.js?2b0e:1897
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1871
callHook @ vue.runtime.esm.js?2b0e:4235
mountComponent @ vue.runtime.esm.js?2b0e:4058
Vue.$mount @ vue.runtime.esm.js?2b0e:8459
init @ vue.runtime.esm.js?2b0e:3137
merged @ vue.runtime.esm.js?2b0e:3322
createComponent @ vue.runtime.esm.js?2b0e:6022
createElm @ vue.runtime.esm.js?2b0e:5969
patch @ vue.runtime.esm.js?2b0e:6560
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4081
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ vue-router.esm.js?8c4f:2989
eval @ vue-router.esm.js?8c4f:2988
updateRoute @ vue-router.esm.js?8c4f:2409
eval @ vue-router.esm.js?8c4f:2263
eval @ vue-router.esm.js?8c4f:2397
step @ vue-router.esm.js?8c4f:2001
step @ vue-router.esm.js?8c4f:2008
runQueue @ vue-router.esm.js?8c4f:2012
eval @ vue-router.esm.js?8c4f:2392
step @ vue-router.esm.js?8c4f:2001
eval @ vue-router.esm.js?8c4f:2005
eval @ vue-router.esm.js?8c4f:2379
eval @ vue-router.esm.js?8c4f:2127
eval @ vue-router.esm.js?8c4f:2203
Promise.then (async)
eval @ vue-router.esm.js?8c4f:2150
eval @ vue-router.esm.js?8c4f:2171
eval @ vue-router.esm.js?8c4f:2171
flatMapComponents @ vue-router.esm.js?8c4f:2170
eval @ vue-router.esm.js?8c4f:2106
iterator @ vue-router.esm.js?8c4f:2357
step @ vue-router.esm.js?8c4f:2004
step @ vue-router.esm.js?8c4f:2008
runQueue @ vue-router.esm.js?8c4f:2012
confirmTransition @ vue-router.esm.js?8c4f:2387
transitionTo @ vue-router.esm.js?8c4f:2260
init @ vue-router.esm.js?8c4f:2980
beforeCreate @ vue-router.esm.js?8c4f:1298
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
callHook @ vue.runtime.esm.js?2b0e:4235
Vue._init @ vue.runtime.esm.js?2b0e:5018
Vue @ vue.runtime.esm.js?2b0e:5099
eval @ main.js?56d7:30
./src/main.js @ app.js:1225
__webpack_require__ @ app.js:854
fn @ app.js:151
1 @ app.js:1262
__webpack_require__ @ app.js:854
checkDeferredModules @ app.js:46
(anonymous) @ app.js:994
(anonymous) @ app.js:997

firebase/db.js;

import firebase from 'firebase';
import 'firebase/firestore';

// Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    //[removed for privacy]
  };
  // Initialize Firebase
  export const db = firebase.initializeApp(firebaseConfig).firestore();
  firebase.analytics();

Solution 1:^[1]

I seem to have fixed it by changing my config file to:

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

  const firebaseConfig = {
    //[hidden]
  };

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);


  // Initialize Firebase Authentication and get a reference to the service
  export const auth = firebase.auth();

Then in my App.vue component, I can:

import {auth} from './firebase/db';

And change firebase.auth() ... to just auth. ..., like this:

  await auth.signInWithPopup(provider).then(() => {
    auth.onAuthStateChanged((user) => {

However in my other components, I can retain the original import firebase from 'firebase'; and firebase.auth() ... and it works without errors. I don't know why this is. Does anyone know why?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Joseph

'Removing firestore from Vue project but retaining firebase auth

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]