The initialization of Firebase is not being completed before it is being called in other files

Question

The initialization of Firebase is not being completed before it is being called in other files

I am currently working on a vue project and I am attempting to integrate firebase. However, I have encountered an issue where my other JavaScript files like auth.js are utilizing firebase before it is properly initialized in my main.js file (which acts as the entry point for webpack) due to using the vue-cli with the webpack template.

The error message that I am receiving states:

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

Below is the beginning section of my main.js file:

// main.js
import Vue from 'vue';
import firebase from 'firebase';
// import firebaseui from 'firebaseui';
import VueFire from 'vuefire';
import App from './App';
import router from './router';
import database from './js/database';

Vue.use(VueFire);

const config = {
  apiKey: '***',
  authDomain: '***',
  databaseURL: '***',
  storageBucket: '***',
  messagingSenderId: '***',
};

firebase.initializeApp(config);
database.init();

This is my first experience working with firebase, any insights into what could be causing this issue?

javascript firebase vue.js

Answer 1

Answer №1

This is the approach I took

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import App from './App.vue'
import { routes } from './routes'
import * as firebase from 'firebase'
import { store } from './store/store'

Vue.use(VueResource);
Vue.use(VueRouter);


const router = new VueRouter({
  routes,
});

let config = {
apiKey: "XXXX",
authDomain: "XXXXXX",
databaseURL: "xXxxxxxx",
storageBucket: "XXXXXX",
messagingSenderId: "XXXXXX"
};

Vue.prototype.$firebase = firebase.initializeApp(config);

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

I opted not to utilize vue fire However, I can access Firebase features throughout my application by using

this.$firebase.auth()
this.$firebase.database()
this.$firebase.storage()

Answer 2

This is the approach I took

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import App from './App.vue'
import { routes } from './routes'
import * as firebase from 'firebase'
import { store } from './store/store'

Vue.use(VueResource);
Vue.use(VueRouter);


const router = new VueRouter({
  routes,
});

let config = {
apiKey: "XXXX",
authDomain: "XXXXXX",
databaseURL: "xXxxxxxx",
storageBucket: "XXXXXX",
messagingSenderId: "XXXXXX"
};

Vue.prototype.$firebase = firebase.initializeApp(config);

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

I opted not to utilize vue fire However, I can access Firebase features throughout my application by using

this.$firebase.auth()
this.$firebase.database()
this.$firebase.storage()

The initialization of Firebase is not being completed before it is being called in other files

Answer №1

Similar questions

Update an API call to switch from promises to observables, implementing axios

Bringing in two JavaScript files with identical names

Using JavaScript drag and drop feature to remove the dragged element after a successful drop operation

Concealing a form after submission using JavaScript

Leveraging pre-rendered HTML in Vue.js components for both parent and child elements

Transforming Form Input into Request Payload for an AJAX Call

Identifying Master Page Controls Post-Rendering

Seeking assistance with formatting output for OpenCPU and igraph

What is the best way to refresh a multiselect in vue.js?

It appears that the JavaScript array is able to modify itself autonomously

Having trouble running `npm run dev` due to a webpack/babel conflict?

Import JSON Data into Angular-nvD3 Chart (AngularJS)

Guide on creating a menu that remains open continuously through mouse hovering until the user chooses an option from the menu

Adding HTML content using jQuery's document.ready feature

Display the elements of a div at a reduced size of 25% from its original dimensions

Unlocking the power of dynamic text using a single form

Having trouble utilizing Reactjs Pagination to navigate through the data

NodeJS - The server returns a 404 error before ultimately displaying the requested page

How to delete the final element in a stack trace string using Javascript

Implementing method overrides in TypeScript class objects inherited from JavaScript function-based classes