Back

Technologies:

javascriptjavascript
htmlhtml
avatar
Tolerim
a month ago

The Firebase App is either not available or undefined.

The given code initializes Firebase with configuration details and is required to be called before the app can access the database. The error suggests that the app has not been initialized yet. To resolve this issue, the function 'Firebase.initializeApp()' needs to be called in the JavaScript file immediately after the firebaseConfig object is defined. Here is the modified code: 
`var firebaseConfig = {
    apiKey: ,
    authDomain: ,
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "*",
    appId: "",
    measurementId: ""
};
firebase.initializeApp(firebaseConfig); // Adding this line resolves the issue

var firebaseRef = firebase.database().ref("addHomelessFriendForm")
firebaseRef.on("value", function (snapshot) {
    snapshot.forEach(function (element) {
        document.querySelector("#root").innerHTML =
            "<div>${element.val()}</div>"
    })
})`
Additionally, please ensure that the Firebase version used in the HTML file matches the version used in the JavaScript file. Also, it is recommended to load the Firebase SDK first and then the app scripts to avoid any undefined errors.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
Thank you for sharing the code snippet. The error message suggests that the app has not been initialized yet. To resolve this issue, you can call the function 'Firebase.initializeApp()' in the JavaScript file immediately after the firebaseConfig object is defined. Here is the modified code: 
var firebaseConfig = {
    apiKey: ****,
    authDomain: ****,
    databaseURL: "****",
    projectId: "****",
    storageBucket: "****",
    messagingSenderId: "*",
    appId: "****",
    measurementId: "****"
};
firebase.initializeApp(firebaseConfig); // Adding this line resolves the issue

var firebaseRef = firebase.database().ref("addHomelessFriendForm")
firebaseRef.on("value", function (snapshot) {
    snapshot.forEach(function (element) {
        document.querySelector("#root").innerHTML =
            "<div>${element.val()}</div>"
    })
})
Also, please ensure that the Firebase version used in the HTML file matches the version used in the JavaScript file. It is recommended to load the Firebase SDK first and then the app scripts to avoid any undefined errors. Let me know if you have any other questions or if there's anything else I can help you with.
avatar
Tolerim
a month ago
The error you are seeing is because the Firebase App instance has not been initialized yet before making a call to the database. Make sure you have initialized your Firebase App instance by calling firebase.initializeApp(firebaseConfig) before attempting to use any Firebase services. In your above code snippets, you have included the firebase-app.js and firebase-database.js scripts, which will give you access to the Firebase App and Realtime Database services. However, in your code, you are calling firebase.database().ref() before initializing the Firebase App instance, which is causing the error you are seeing. To fix this issue, you should move the following line of code to be before your call to firebase.database().ref(): 
firebase.initializeApp(firebaseConfig);
This will properly initialize your Firebase App instance, allowing you to then call firebase.database().ref() without seeing the "No Firebase App '[DEFAULT]' has been created" error. Also, please take note that you have included two different versions of the Firebase library in your HTML file: firebase-app.js from version 7.2.2 and firebase.js from version 7.14.1-0. It's better to use the same version of the Firebase library throughout your entire project to avoid any potential issues. Here is the modified code: 
var firebaseConfig = {
    apiKey: ****,
    authDomain: ****,
    databaseURL: "****",
    projectId: "****",
    storageBucket: "****",
    messagingSenderId: "*****",
    appId: "****",
    measurementId: "****"
};

firebase.initializeApp(firebaseConfig); // initialize Firebase App instance

var firebaseRef = firebase.database().ref("addHomelessFriendForm")
firebaseRef.on("value", function (snapshot) {
    snapshot.forEach(function (element) {
        document.querySelector("#root").innerHTML =
            "<div>${element.val()}</div>"
    })
})
And your HTML code should be like this: 
<script src="https://www.gstatic.com/firebasejs/7.2.2/firebase-app.js"></script>
<script src='https://www.gstatic.com/firebasejs/7.2.2/firebase-database.js'></script>
<!-- materialize icons, css & js -->
<link type="text/css" href="../css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" href="../css/styles.css" rel="stylesheet">
<script type="text/javascript" src="../js/materialize.min.js"></script>

<script src="../js/common.js"></script>
<script type="text/javascript" src="../js/configDB.js"></script>
;