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?

javascriptfirebasevue.js

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()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Beginning your journey with Mock server and Grunt

Although I have gone through the documentation available at , I am still struggling to get the mockserver up and running despite spending hours on following the instructions provided in the guide. Could someone please outline the precise steps or identify ...

javascriptgruntjsmocking

Can someone assist me in creating a basic query for MongoDB that is similar to the SQL query "select speed from values"?

I'm struggling to come up with a simple MongoDB query (similar to the SQL equivalent: "select speed from values"). I've been searching for a solution but can't seem to find one. My setup involves a Node.js backend for Vue.js. // Here is a s ...

node.jsmongodbvue.jsexpress

Incorporate a Three.js viewer within a WPF application

I am currently exploring the use of Three.js to develop a versatile 3D renderer that can run seamlessly on various platforms through integration with a "WebView" or "WebBrowser" component within native applications. I have successfully implemented this sol ...

c#javascriptwpfthree.js

Embracing the power of dynamic imports in Next.js 10 with SDK integration for

I attempted to dynamically import the TRTC SDK using Next.js 10: const TRTC = dynamic(() => import('trtc-js-sdk').then((module) => module.NamedExport), { ssr: false }); However, I encountered an error stating "TRTC.createClient is not a co ...

javascriptreactjsnext.jstrtc.io

Sophisticated method for implementing dynamic components with props in Vue

In a specific scenario, I am using an API to output all the content for my Page, including its structure. To provide context, imagine a CMS with a page builder feature where authors can place components via drag and drop to create pages, which are then del ...

javascriptapivue.jsv-forvue-dynamic-components

The redesigned pie chart animations in d3 are experiencing glitches

Previously, I had a pie chart with fantastic animations. You can view it here: https://jsfiddle.net/tk5xog0g/29/ I tried to rebuild the chart and improve it based on my needs, but the animations no longer work as intended. I suspect this might be due to ...

javascriptd3.jscharts

The jQuery remove function will only take effect on the second click following an AJAX request

I'm facing an issue with my jQuery code where two divs contain lists of links, triggering AJAX calls to append JSON data to a separate div. Upon clicking a link, the corresponding link div should hide. There's also a third div with the class "pan ...

javascriptjqueryhtmlcssajax

Failed to compile: npm encountered an error due to multiple missing packages

Recently, I set up a new firebase project within my existing project. After adding functions to the project, I attempted to deploy the default helloWorld function. const functions = require("firebase-functions"); // // Create and deploy your fir ...

node.jsfirebasenpmgoogle-cloud-functions

The Value Entered in Angular is Unsaved

I have encountered an issue with my app's table functionality. The user can enter information into an input field and save it, but upon refreshing the page, the field appears empty as if no data was entered. Can someone please review my code snippet b ...

javascripthtmlangulartypescript

Generate final string output from compiled template

Check out this template I created: <script type="text/ng-template" id="validationErrors.html"> <div id="validationErrors"> <div id="errorListContainer"> <h2>Your order has some errors:</h2> ...

javascriptangularjs

TypeScript error: Unable to locate namespace 'ng'

I am attempting to utilize a tsconfig.json file in order to avoid having /// <reference tags at the beginning of multiple files. However, I keep encountering this error: [ts] Cannot find namespace 'ng'. any Here is my configuration within ...

javascriptangularjstypescripttypescript-typings

What is the method or variable called "afterShow" used for in FancyBox V4 and how does it differ from its counterpart in JQuery-FancyBox V3?

We previously utilized the V3 edition of Fancybox, incorporating our increaseImageClicks and increaseVideoClicks functions within its afterShow function: /* FANCYBOX OLD (https://web.archive.org/web/20210325170940/https://fancyapps.com/fancybox/3/docs/): * ...

javascriptjqueryfancybox

Extract website addresses from a text and store them in an array

I am currently attempting to extract URLs from a string and store them in an array. I have implemented a node module to assist with this task. const getUrls = require("get-urls") url = getUrls(message.content) However, the current implementation fails to ...

javascriptnode.jsdiscord.js

Sending a variable to an AngularJS factory

I am currently working on a select list that looks like this: <select name="make" class="form-control" ng-model="selectCity"> <option value="Kannur">Kannur</option> <option value="Agra">Agra</option> <option va ...

javascripthtmlangularjs

Updating a query parameter with jQuery

Looking for a way to modify the value of a query parameter in a URL using jQuery. There are two example URLs: www.domain.com/?id=10&name=xxx and www.domain.com/?name=xxx&id=10 I want to update the id parameter to something like www.domain.com/ ...

javascriptjquerystringquery-string

Guide on how to address the problem of the @tawk.to/tawk-messenger-react module's absence of TypeScript definitions

Is there a way to fix the issue of missing TypeScript definitions for the @tawk.to/tawk-messenger-react module? The module '@tawk.to/tawk-messenger-react' does not have a declaration file. 'c:/develop/eachblock/aquatrack/management-tool-app ...

javascripttypescriptnext.jsnextjs14tawk.to

Tips for efficiently sending emails by looping through arrays in a Firestore database

I need help figuring out how to loop through data in order to send a user receipt from an eCommerce store. I attempted to use [] with the dynamic data, but it didn't quite work as expected. import * as functions from "firebase-functions"; import * a ...

node.jsfirebasegoogle-cloud-firestoregoogle-cloud-functionssendgrid

Illuminate a corresponding regular expression within a text input

I currently have a functional code for testing regex, which highlights matching patterns. However, my challenge lies in highlighting the result within the same input as the test string. Below you will see the HTML and JavaScript snippets along with two ima ...

javascripthtmlangularjsregex

Display a collection of objects using Jade / Pug syntax

Struggling to find resources on Pug / Jade templating, turning to this platform for help. I've been diving into documentation on iterations along with consulting this helpful link. Working with Node.js, Express, and pug for a school project - a mock ...

javascriptnode.jsexpresspug

Having difficulty removing Vue from my Ubuntu system

Hey there, I've been using WSL and trying to run my Vue project with version 2.9.0, but when I check the version with vue -V, it shows 2.9.6. I've attempted uninstalling Vue CLI using both npm uninstall @vue/cli and npm uninstall -g @vue/cli, bu ...

vue.jswindows-subsystem-for-linux