'db is undefined' problem with firebase integration in JS

Question

I am doing a small contact form on my personal website. I have a problem with integration of firebase database with form. I read the documentation and watched some YT tutorials and I cannot find the mistake. Could you please take a look? I get a 'db is undefined' error in console.

window.onload = function() {
  var firebaseConfig = {
      apiKey: "sampleValue",
      authDomain: "sampleValue",
      databaseURL: "sampleValue",
      projectId: "sampleValue",
      storageBucket: "sampleValue",
      messagingSenderId: "sampleValue",
      appId: "sampleValue",
      measurementId: "sampleValue"
  };

  firebase.initializeApp(firebaseConfig);
  let db = firebase.firestore;

  function submitForm() {
    // e.preventDefault();

    let nameEl = document.getElementById("InputName");
    let emailEl = document.getElementById("InputEmail");
    let subjectEl = document.getElementById("InputSubject");
    let messageEl = document.getElementById("InputMessage");

    let nameValue = nameEl.value;
    let emailValue = emailEl.value;
    let subjectValue = subjectEl.value;
    let messageValue = messageEl.value;

    db.collection("contact").doc().set({
        name: nameValue,
        email: emailValue,
        subject: subjectValue,
        message: messageValue
      })
      .then(function() {
        alert("dataSaved");
      })
      .catch(function() {
        alert("error");
      });
  }
  document.getElementById("submit").addEventListener("click", submitForm());
};

Edit I have managed to solve the problem thanks to fellow users @Kevin Peña and @Phix help by: putting the missing firebase-firestore.js script in index.html

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

I had realized that settings in my DB disallowed me to push anything from my form so I have changed the rules to

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

It should be firebase.firestore(), and the event listener function shouldn't have the parenthesis — Phix
– Phix, Commented Mar 25, 2020 at 0:36

Kevin Peña · Accepted Answer · 2020-03-25 00:46:00Z

1

Expanding a bit on Phix's comment. Right here:

firebase.initializeApp(firebaseConfig);
let db = firebase.firestore; // <- here

It should be

let db = firebase.firestore()

You can find this on the Guides and on the Reference.

Also, here:

document.getElementById("submit").addEventListener("click", submitForm() /* <-over here */);

You should not call the function, instead pass it to addEventListener (i.e. just its name)

document.getElementById("submit").addEventListener("click", submitForm);

Otherwise the form will be submitted empty when the page loads. And nothing will happen on button click.

answered Mar 25, 2020 at 0:46

Kevin Peña

7824 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

S.Rucinski Over a year ago

Thank you for your explanation! After implementing this changes I get the following error "TypeError: firebase.firestore is not a function".

Kevin Peña Over a year ago

Make sure that you are properly including the scripts for both firebase-app and firebase-firestore

Collectives™ on Stack Overflow

'db is undefined' problem with firebase integration in JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related