CODEWITHSUNDEEP
javascripthtmlgoogle-cloud-firestore
Boon
Boon

Reputation: 53

Uncaught ReferenceError: db is not defined

I'm new to Firestore and I'm trying to use db in app.js but I get this error(Uncaught ReferenceError: db is not defined) on console when I run the html file. May I know what how can I solve this problem?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div>
        <h1>Cloud cafe</h1>
        <div class="content">
            <form id="add-cafe-form"></form>
            <ul id="cafe-list"></ul>
        </div>
    </div>
    
    <script type="module">

      // Import the functions you need from the SDKs you need
      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
      import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-analytics.js";
      import { getFirestore} from "https://www.gstatic.com/firebasejs/9.0.1/firebase-firestore.js";
      // TODO: Add SDKs for Firebase products that you want to use
      // https://firebase.google.com/docs/web/setup#available-libraries

      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      const firebaseConfig = {
        apiKey: "AIzaSyA_iQKn0dazcTipquleNaF0df32KdWKia4",
        authDomain: "ninja-flutter-tut.firebaseapp.com",
        projectId: "ninja-flutter-tut",
        storageBucket: "ninja-flutter-tut.appspot.com",
        messagingSenderId: "876805702468",
        appId: "1:876805702468:web:cd2cc55cc394f94726cd11",
        measurementId: "G-9HDMHXT2PY"
      };

      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
      const analytics = getAnalytics(app);
      const db = getFirestore(app);
    </script>
    <script src="app.js"></script>
</body>
</html>

Below is the code for app.js

// getting data
db.collection('cafes').get().then(snapshot => {
    console.log("test");
});

Upvotes: 3

Views: 5881

Answers (4)

Wang Liang
Wang Liang

Reputation: 4444

window.db = getFirestore(app);

app.js

setTimeout(()=>{
    window.db.collection('cafes').get().then(snapshot => {
        console.log("test");
    });
}, 5000);

Upvotes: 1

Boon
Boon

Reputation: 53

Below are my solution:

// app.js

// getting data
db.collection('cafes').get().then((snapshot) => {
    console.log('test')
});
/* style.css */

body{
    background: #eab0dc;
    font-family: ubuntu;
}

h1{
    color: #fff;
    font-size: 64px;
    letter-spacing: 2px;
    margin-top: 80px;
    text-align: center;
}

.content{
    background: #fff;
    max-width: 960px;
    margin: 30px auto;
    padding:  20px 30px;
    border-radius: 10px 120px 10px 10px;
    box-shadow: 1px 3px 5px rgba(0,0,0,0.1)
}

ul{
    list-style-type: none;
    padding: 0;
}

li{
    padding: 20px;
    background: #f6f6f6;
    font-size: 20px;
    color: #555;
    position: relative;
    border-bottom: 1px solid #e6e6e6;
    height: 46px;
}

li:nth-child(even){
    padding: 20px;
    background: #f2f2f2;
}

li span{
    display: block;
}

li span:nth-child(2){
    font-size: 16px;
    margin-top: 6px;
    color: #999;
}

li div{
    position: absolute;
    top: 0;
    right: 0px;
    background: rgba(255,255,255,0.6);
    width: 40px;
    text-align: center;
    padding: 10px 0;
    font-weight:  bold;
    cursor:  pointer;
}

form input{
    float: left;
    width: 38%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid #eee;
    margin: 0 1%;
    padding: 10px;
    display: block;
    box-sizing: border-box;
    font-size: 18px;
}

form input:focus{
    outline: none;
    border-bottom: 3px solid #88236f;
    padding-bottom: 8px;
    transition: all ease 0.2s;
}

form:after{
    content: '';
    clear: both;
    display: block;
}

button{
    border: 0;
    background: #fff;
    border-radius: 10px;
    padding: 13px;
    width: 14%;
    box-shadow: -1px 0px 1px rgba(0,0,0,0.1);
    font-weight: bold;
    font-family: ubuntu;
    letter-spacing: 1px;
    color: #999;
}
<html>
    <head>
        <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Cloud Cafe</h1>
        <div class="content">
            <form id="add-cafe-form"></form>
            <ul id="cafe-list"></ul>
        </div>
        <script>
            // For Firebase JS SDK v7.20.0 and later, measurementId is optional
            const firebaseConfig = {
              apiKey: "AIzaSyA_iQKn0dazcTipquleNaF0df32KdWKia4",
              authDomain: "ninja-flutter-tut.firebaseapp.com",
              projectId: "ninja-flutter-tut",
              storageBucket: "ninja-flutter-tut.appspot.com",
              messagingSenderId: "876805702468",
              appId: "1:876805702468:web:cd2cc55cc394f94726cd11",
              measurementId: "G-9HDMHXT2PY"
            };
            firebase.initializeApp(firebaseConfig);
            const db = firebase.firestore();
        </script>
        <script src="app.js"></script>
    </body>
</html>

Upvotes: 1

Tarik Huber
Tarik Huber

Reputation: 7398

You are using the new SDK with version 9 but write code for the SDK version 8. Try to check this and this out. Just don't forget to select the right version:

enter image description here

Example code for collection:

import { collection, getDocs } from "firebase/firestore"; 

const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`);
});

Upvotes: 2

mpmcintyre
mpmcintyre

Reputation: 707

The most likely cause is that your app.js file gets executed before you define the db variable. You might want to add a defer statement to your app.js script since you are defining the db variable in the script above it like so:

<script src="app.js" defer></script>

The best would be to just include the first scripts contents in your app.js file so that you don't have two separate script files like so: app.js:

  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-analytics.js";
  import { getFirestore} from "https://www.gstatic.com/firebasejs/9.0.1/firebase-firestore.js";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "AIzaSyA_iQKn0dazcTipquleNaF0df32KdWKia4",
    authDomain: "ninja-flutter-tut.firebaseapp.com",
    projectId: "ninja-flutter-tut",
    storageBucket: "ninja-flutter-tut.appspot.com",
    messagingSenderId: "876805702468",
    appId: "1:876805702468:web:cd2cc55cc394f94726cd11",
    measurementId: "G-9HDMHXT2PY"
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
  const db = getFirestore();

  // getting data
db.collection('cafes').get().then(snapshot => {
    console.log("test");
});

Upvotes: 2

Related Questions