CODEWITHSUNDEEP
javascriptfirebase
HTMLKid44
HTMLKid44

Reputation: 15

Uncaught referenceerror : firebase is not defined

Hey guys I just setuped my web app with an firebase api. Some how I always get that error that my firebase is not defined.

APP.js

// Your web app's Firebase configuration

var firebaseConfig = {
    apiKey: "AIzaSyBs7a0TXXXXXXXXXXI",
    authDomain: "einkaufsliste-XX5.firebaseapp.com",
    databaseURL: "https://einkaufsliste-XX5.firebaseio.com",
    projectId: "einkaufsliste-94a15",
    storageBucket: "einkaufsliste-XX5.appspot.com",
    messagingSenderId: "1047615970771",
    appId: "1:1047615970771:web:dda3e17725XXX",
    measurementId: "G-0SLEKM6XW1"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig
);
firebase.analytics();

// ELEMENTS

const emailField = document.getElementById('emailField');
const passwordField = document.getElementById('emailField');
const btnLogin = document.getElementById('emailField');
const btnSignUp = document.getElementById('emailField');
const btnLogout = document.getElementById('emailField');

//LOGIN
btnLogin.addEventListener('click', ev => {
    const email = emailField.value;
    const password = passwordField.value;
    const auth = fireb.auth();
    auth.signInWithEmailAndPassword(email,password);
    promise.catch(e => console.log(e.message));

} )
const auth = firebase.auth();
auth.signInWithEmailAndPassword(email,password);
auth.createUserWithEmailAndPassword(email,password);
auth.onAuthStateChanged(firebaseUser => {});

function logout() {
    firebase.auth().signOut();
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Einkaufsliste</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="public/style.css">

</head>
<body>
<div class="container">
    <input id="emailField" type="email" placeholder="Email">

    <input id="passwordField" type="password" placeholder="Passwort">

    <button id="btnLogin" class="btn btn-action">
        Login
    </button>

    <button id="btnSignUp" class="btn btn-action">
        Registrieren
    </button>

    <button id="btnLogout" class="btn btn-action hide">
        Logout
    </button>
</div>
<script src="app.js"></script>
<script src="/__/firebase/7.14.2/firebase-app.js"></script>
<script src="/__/firebase/7.14.2/firebase-auth.js"></script>
<script src="/__/firebase/7.14.2/firebase-database.js"></script>
<script src="/__/firebase/7.14.2/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-analytics.js"></script>
<script src="/__/firebase/init.js"></script>
</body>
</html>

I read every single bit of the documents and couldnt figure out what the problem was. Im on firebase 7.

app.js:14 Uncaught ReferenceError: firebase is not defined
    at app.js:14

Is the error I get but its the same code as in the documentation. I also copied the firebaseconfig and initialize code.

Upvotes: 1

Views: 5264

Answers (1)

Doug Stevenson
Doug Stevenson

Reputation: 317828

You should include your app.js after all of the Firebase scripts.

<script src="/__/firebase/7.14.2/firebase-app.js"></script>
<script src="/__/firebase/7.14.2/firebase-auth.js"></script>
<script src="/__/firebase/7.14.2/firebase-database.js"></script>
<script src="/__/firebase/7.14.2/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-analytics.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="app.js"></script>

They execute in the order they appear, and you will not have firebase ready for use until they all execute.

Upvotes: 2

Related Questions