The current initialization status does not show any instances of firebase.app.App

Initially, my main concern was ensuring that all the Firebase scripts were properly loaded in the correct order.

To tackle this issue, I came up with a simple yet effective solution :)

var my_firebase_init = function(){

    firebase.initializeApp(my_firebase_config);
    firebase.auth().languageCode = my_lang;

    console.log('FIREBASE INIT OK');


}

var firebase_version = 'https://www.gstatic.com/firebasejs/4.6.2/';

var scripts = [
    firebase_version+'firebase.js',
    firebase_version+'firebase-app.js',
    firebase_version+'firebase-auth.js',
    'my_firebase_init'

];

var script_loaded = [];

var deferred = new $.Deferred(),

pipe = deferred;

$.each(scripts , function(index, script) {
    pipe = pipe.pipe(function() {

        if(script == 'my_firebase_init'){
            if(script_loaded[0] && script_loaded[1] && script_loaded[2]){
                my_firebase_init();
            }
            return;
        }

        return $.getScript(script)
            .done(function( script, textStatus ) {
                 script_loaded[index] = true
            })
            .fail(function( jqxhr, settings, exception ) {
                 script_loaded[index] = false
        });                 
    });
});

deferred.resolve(); 

After setting this up, now I am able to see console.log('FIREBASE INIT OK')

Next, I experimented with integrating Google reCAPTCHA like so:

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('id_container_recaptcha', {
    'size': 'invisible',
    'callback': function(response) {
        // reCAPTCHA solved, allow user to do action.
        // ...   
    },
    'expired-callback': function() {
         // Response expired. Ask user to solve reCAPTCHA again.
         // ...
    }

});

While this setup was functioning well, occasionally an error message would pop up:

No firebase.app.App instance is currently initialized

I observed that by waiting and retrying, the issue would resolve itself!

Hence my inquiry: Is there a way to verify if firebase.app.App has been initialized?

Answer №1

To begin using firebase, you must first initialize it:

/* Make sure to always include Firebase App first */
var firebase = require("firebase/app");
var app;

var firebaseConfig = {
    apiKey: "your-api-key",
    authDomain: "your-app.firebaseapp.com",
    databaseURL: "https://your-app.firebaseio.com",
    storageBucket: "your-app.appspot.com",
};

/* Run this code on DOM ready */
$(function() {

    app = firebase.initializeApp(firebaseConfig);

    /* Check here if everything is loaded correctly */
});

Answer №2

Bring in everything from firebase;

import * as firebase from 'firebase';

Make sure to initialize it after ngModule()

firebase.initializeApp(config);

After that, your code should remain unchanged

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

What is the best way to establish a default selection in Angular?

After retrieving JSON data from the server, it looks something like this: $scope.StateList = {"States": [ { "Id": 1, "Code": "AL", "Name": "Alabama" }, { "Id": 2, "Code": "AK", "Name": "Alask ...

The tooltip being displayed is plain and lacks any design elements

When I hover over my a element, only a simple tooltip appears without any styling, unlike what is shown in the Bootstrap documentation. (I am creating the a element using JavaScript) HTML <!DOCTYPE html> <html lang="en"> <head> ...

Building a chat console resembling IRC using JavaScript

I am a novice in HTML and JavaScript. I am currently working on creating a simple program that takes input from the user via the command line and displays it in a large console window. However, when I enter a simple text, nothing is displayed in the box. D ...

What is the process for attaching text or labels to an object, similar to applying decals?

Check out this website: On this site, you can create text, add it to objects like a decal, and then click "Ok" to confirm. Is there a way to make this effect visible on the design? Many thanks in advance! ...

Pass data as JSON from PHP function to Ajax

I'm encountering an issue while working on a project for my university. The initial task involves creating a login form in PHP that utilizes AJAX. However, I am facing challenges with the "output" function in the functions.php file. Instead of display ...

Eliminate all blank spaces at the top and bottom of Span by squishing it

Imagine I have this code snippet: <span class="labels" style="background-color: #FFFFFF;border: 1px solid #000000;font-family: Verdana;font-size: 11px; ">74.58 ft.</span> I am looking for a way to compress the span element so that only the te ...

When hovering over slick text, it becomes hidden because of non-responsive CSS. Are there any solutions to make it responsive?

I can't seem to get the on-hover dates to appear, even though they are rendered when inspecting the page. I suspect it could be related to a responsive CSS issue or class breaking. How can I resolve this? https://i.stack.imgur.com/jyEJb.png https:// ...

Utilizing jQuery Mobile - Dividing content across multiple HTML files

In the process of developing a web application utilizing jQuery and jQuery mobile, I am aiming to display various pages. Given that the corresponding html-markup may become lengthy, I am interested in dividing the html into separate files. For instance: & ...

Is it possible for an Express app.get() function to identify and handle requests for specific file extensions

Is it possible for me to manage requests for any .html file type? For example, can I achieve something like this: // server.js app.get('/*.html', (req, res) => { // perform certain actions when an html file request is made }); ...

Resetting a JQuery button to its initial state

I have a button that, when clicked, rotates to 25deg thanks to Jquery. Now, I want it so that if I click the button again, it returns to its original position. Here is what I have tried: $(document).ready(function() { $(function() { ...

Erase every picture contained within the element

<div id="uniqueidhere"> <span> <span><img src="image1link"></img></span> <span><img src="image2link"></img></span> <span><img src="image3link"></img></span> <span>&l ...

Vue 3 array error: Additional attributes not designated as props were passed to the component and could not be inherited automatically

Hey there, I'm currently delving into learning VueJS 3 and facing a beginner issue. When I check the browser developer console, I come across this warning message: https://i.stack.imgur.com/5eo6r.png The warning message reads as follows: [Vue warn]: ...

Why are my AngularJS functions failing to execute following the loading of JavaScript?

On my webpage, I am utilizing JavaScript's load() method to insert a specific div element from another page: setTimeout(function(){ function showPattern(patternId, page_url) { var patternstuff = $(patternId).load(page_url + " .pattern-markup"); ...

Revolutionizing messaging with Vue JS and Firebase

My web application is designed to check if a user has messages in the Firebase database. If messages are found, it retrieves the data from the users who sent those messages from my local database and displays them in a list using a v-for loop. The display ...

Error in Rails due to a Javascript issue

My journey with learning Javascript started by following an easy game tutorial on RoR. I encountered an error in index.html.erb file which led me to a helpful video tutorial here. <script> var ctx, canvas; var data; window.onload = fun ...

Utilizing Angular RXJS to generate an array consisting of three different observable streams

I am trying to use three different streams to create an array of each one. For example: [homePage, mainNavigation, loan_originators] However, currently only mainNavigation is being returned. const homePage = this.flamelinkService.getData('homePage ...

When the page is refreshed in Firebase React js, the array data is rewritten

I am facing an issue with adding a list of topics to the firebase database. Each user should be able to create their own unique list of topics, but currently when I refresh the page and try to add another item, the entire list in the database gets erased ...

[Distinguishing a Custom Directive] Exploring the contrast of utilizing scope.$watch in the link function versus incorporating scope.$watch

Apologies if this question has been addressed before, but I have not found a satisfactory documentation yet. I am curious about the distinction between utilizing scope.$watch in the link function versus in the controller function within a custom directive ...

The state in React Native remains consistent and unaltered

I'm currently working on developing my very first game application. My main objective is to pass the color GreenF to the Green component. However, I am encountering an issue where the state is not changing as expected. It is essential for GreenF to ...

Having trouble activating Ajax code in jquery

I have integrated the swal (SweetAlert) UI for confirmation messages in my project. In my jQuery code, I have an Ajax function to remove an item when the user clicks on "Yes, Delete It." However, for some reason, the Ajax code is not triggering as expecte ...