CODEWITHSUNDEEP
javascriptfirebasevue.jsfirebase-realtime-databasevuetify.js
CzarnowskiJ
CzarnowskiJ

Reputation: 21

Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app) in vue.js

So I'm building mobile app via veu.js -> vuetify module using realtime database from firebase.

One of my views - Pract.vue need to retrive data from database.

<template>
  <div class="pa-6 text-center">
    <h1>Practice Mode</h1>
  </div>
</template>



<script>
import firebase from "firebase";
import "firebase/database";

var ref = firebase.database().ref("ang");


</script>

I added firebase.initializeApp(firebaseConfig); with data generated by firebase console to main.js file and import firebase from "firebase"

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
import firebase from "firebase";

// Xs in original code are real data

var firebaseConfig = {
    apiKey: "X",
    authDomain: "X",
    databaseURL: "X",
    projectId: "X",
    storageBucket: "X",
    messagingSenderId: "X",
    appId: "X",
    measurementId: "X"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Vue.config.productionTip = false

new Vue({
    router,
    store,
    vuetify,
    render: h => h(App)
}).$mount('#app')

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

I've tried import firebase from 'firebase/app' both in view and main.js -> same alert.

Upvotes: 2

Views: 1640

Answers (2)

Devamuthan Sankar
Devamuthan Sankar

Reputation: 11

  • Try changing the import statement to

    import firebase from "firebase/compat/app";

  • I faced the same error while trying to have an separate file for accessing firebase services (which is neither a component nor a file created by vue-cli). In my case it is sampleAPI.ts. So to solve this, I had to import the above mentioned statement and then initialized the app in sampleAPI.ts that solved my problem.

    firebase.initializeApp(firebaseConfig);

Upvotes: 1

Mark Mckelvie
Mark Mckelvie

Reputation: 343

I had this same issue when trying to use firebase in the router index.ts file. I had to initialize firebase in index.ts to get it to work.

Upvotes: 1

Related Questions