Am trying to link my html contact form with firebase, but am facing an error :
Uncaught Reference Error: firebase is not defined
in my main.js file I defined my CDN in my html file well, but in main.js line is where I face this error in. I successful installed firebase in my project, but still I face the same issue In the line below.
var emailRef = firebase.database().ref('emails');
Here in my main.js code
var emailRef = firebase.database().ref('emails');
// Listen for form submit
document.getElementById('contactForm').addEventListener('submit', submitForm);
// Submit form
function submitForm(e){
e.preventDefault();
//Get values
var FullName = getInputval('FullName');
var Email =getInputval('Email');
// save message
saveMessage(FullName,Email);
// Show alert
document.querySelector('.alert').style.display = 'block';
// Hide alert after 3 seconds
setTimeout(function(){
document.querySelector('.alert').style.display = 'none';
},3000);
// Clear form
document.getElementById('contactForm').reset();
}
// Function to get form values
function getInputval(id){
return document.getElementById(id).value;
}
// Save message to firebase
function saveMessage(Fullname, Email,){
var newEmailRef = emailRef.push();
newEmailRef.set({
Fullname: Fullname,
Email:Email
});
}
And in my index.html file here are my CDN format
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-analytics.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: "xxxxx",
authDomain: "xxxxx",
projectId: "xxxxx",
storageBucket: "xxxxx",
messagingSenderId: "xxxxx",
appId: "xxxxx",
measurementId: "xxxxx"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
<script src="main.js"></script>
Your second snippet is importing version 9 of Firebase in ES module format here:
<script type="module">
But then in the first snippet you try to use Firebase in its older syntax with firebase.database().
That won't work: you will have to either use the new import format and syntax, or use the older namespace syntax.
The equivalent to this v8 code:
var emailRef = firebase.database().ref('emails');
In v9 modular syntax that'd be:
import { getDatabase, ref } from "firebase/database";
// Get a reference to the database service
const database = getDatabase(app);
var emailRef = ref(database, 'emails');
And this code in v8:
function saveMessage(Fullname, Email,){
var newEmailRef = emailRef.push();
newEmailRef.set({
Fullname: Fullname,
Email:Email
});
}
Would look like this in v9:
import { getDatabase, ref, push, set } from "firebase/database";
function saveMessage(Fullname, Email,){
var newEmailRef = push(emailRef);
set(newEmailRef, {
Fullname: Fullname,
Email:Email
});
}
When you're working with this combination of older and newer syntax, I recommend keeping the upgrade guide handy.