2 votes

Error Firebase: db is not defined

When running the page the console gives me "Uncaught ReferenceError: db is not defined". my code is this:

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script>

    <script>
        // Your web app's Firebase configuration
        var firebaseConfig = {
            apiKey: "xxxxxxxxxxxxxxxxxxxx",
            authDomain: "xxxxxxxxxxxxxxxxxxxx",
            databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            messagingSenderId: "xxxxxxxxxxxxxxxx",
            appId: "xxxxxxxxxxxxxxxxx"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
    </script>
    <script>
        var citiesRef = db.collection("cities");

citiesRef.doc("SF").set({
    name: "San Francisco", state: "CA", country: "USA",
    capital: false, population: 860000 });
    </script>
    <script src="../bootstrap/jquery.slim.js"></script>
    <script src="../bootstrap/popper.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

I hope you can help me, I have never had this problem before. I even tried to see if it was solved by running Xampp and it was not.

3voto

Jonathan Arias Points 446

You need to insert the respective Javascript scripts from firebase and firestore, try to do it this way:

    <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-firestore.js">/script>

    <script>
        // Your web app's Firebase configuration
        var firebaseConfig = {
            apiKey: "xxxxxxxxxxxxxxxxxxxx",
            authDomain: "xxxxxxxxxxxxxxxxxxxx",
            databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            messagingSenderId: "xxxxxxxxxxxxxxxx",
            appId: "xxxxxxxxxxxxxxxxx"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);

        const db = firebase.firestore();
    </script>
    <script>
        var citiesRef = db.collection("cities");

        citiesRef.doc("SF").set({
            name: "San Francisco", state: "CA", country: "USA",
            capital: false, population: 860000 });
    </script>
    <script src="../bootstrap/jquery.slim.js"></script>
    <script src="../bootstrap/popper.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

0voto

zerocool Points 821

You use db but at no time you declare it and as the firebase sdk does not have included that object gives you error, in your case you want to access the object that manages the firebase database that is:

 firebase.database()

This is because the main object of the sdk is "firebase".

Now and I imagine that you saw it in some example you have the variable db but that is done to store the database object so that we do not have to constantly write the instruction mentioned above:

  var db = firebase.database()

To then be able to use it as you have it

  db.[función()] 

On the other hand, I recommend you read this in full: https://firebase.google.com/docs/web/setup/ besides mentioning what I just explained they show you that it is a good practice not to load the whole sdk as you are doing but to indicate which components you need separately, in your case it is the core and database.

  <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-app.js"></script>

  <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>

It seems to me that this collection function does not exist, the documentation indicates that to access the database you have to use the .ref() function:

https://firebase.google.com/docs/reference/js/firebase.database.Database

I also leave you the link to the sample project in which they indicate how to access the database to save and read data:

https://github.com/firebase/quickstart-js/blob/master/database/README.md

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X