Develop Reference

Uncaught Reference Error : firebase not defined at main.js

Am trying to Connect Firebase to a Contact Form,
where requires the user to type and submit Fullname , Email and also Message.
But I face Uncaught ReferenceError: firebase is not defined at my main.js file
form my console.
I tried different solution but I couldn't be able to solve it.
Here is my script tag in my index.html
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
</script>
<script src="main.js"></script>
here is my Main.js code
var config = {
apiKey: "xxxxx",
authDomain: "xxxxx",
databaseURL: "xxxxx",
projectId: "xxxxx",
storageBucket: "xxxxx",
messagingSenderId: "xxxxx"
};
firebase.initializeApp(config);
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
});
}

Since you're initializing firebase here, it should be something like this:
const firebase = initializeApp(config);
For more info you can have a look here.

Form button, conneted to Firebase

I want to connect a form to Firebase. How can i connect the button in Html with Firebase by using JavaScript
HTML:
<div class="form-popup" id="myForm">
<form id="add-data" class="form-container">
<button type="submit" class="btn">XXXX"</button>
</form>
In JavaScript:
form.addEventListener('submit', (e) => {
e.preventDefault();
db.collection('xxxx').add({
})

Inside ur javascript:
//Firebase configuration
var firebaseConfig = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
// Initialize Firebase
var db = firebase.initializeApp(firebaseConfig);
//continue ur code here...
form.addEventListener('submit', (e) => {
e.preventDefault();
db.collection('xxxx').add({
})`

How can I use data collection from firestore in html

currently I creating the website using cloud firestore as my database. Right now I can query the data from my collection but it didn't work when I try to display that data on my html web page.
const firebase = require("firebase/app")
require("firebase/firestore")
var firebaseConfig = {
apiKey: "AIzaSyCxrJbfDOorE9H4E0I2O98tLftoxFAHNLU",
authDomain: "school-bus-tracking-syst-3ff71.firebaseapp.com",
databaseURL: "https://school-bus-tracking-syst-3ff71.firebaseio.com",
projectId: "school-bus-tracking-syst-3ff71",
storageBucket: "school-bus-tracking-syst-3ff71.appspot.com",
messagingSenderId: "200434933461",
appId: "1:200434933461:web:4cece32389af487c944c5c",
measurementId: "G-Q9C278TWTV"
};
firebase.initializeApp(firebaseConfig);
var firestore = firebase.firestore();
const inputTextfield = document.querySelector("#contactnum");
const docRef = firestore.doc("driver/D001");
docRef.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
inputTextfield.innerText = doc.data().contactNo;
});
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
and my HTML file is
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-firestore.js"></script>
<input type="text" id="contactnum">
<script scr = "./we.js"></script>
I tried this but I don't get anything display on my html website. Thank you in advance!

Firebase storage error - is not a function

Using html/JS, I am trying to write a file.
I included this on html head :
<head>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-firestore.js"></script>
Then at the end of the body I have :
//...
<script src="javascripts/main.js"></script>
<script>
var config = {
apiKey: "xxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
projectId: "xxxx",
storageBucket: "xxxx.appspot.com",
messagingSenderId: "xxxxx"
};
firebase.initializeApp(config);
const db = firebase.firestore();
db.settings({timestampsInSnapshots:true});
</script>
Then on the main.js file when I try to write to storgae :
var storageRef = firebase.storage().storage.ref()('me/' + file.name);
var task=storageRef.put(file);
task.on('state_changed',
function progress(snapshot){console.log(snapshot.bytesTransferred)},
function error(err){},
function complete(){});
I get this error on the console :
firebase.storage is not a function
EDIT:
Tried again and got same error with :
// Create a root reference
var storageRef = firebase.storage().ref();
// Create a reference to 'images/mountains.jpg'
var finalRef = storageRef.child('me/' + file.name);
finalRef.put(file).then(function(snapshot){
console.log('uploading');
});

you need to add this also:
<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase-storage.js"></script>
to be able to use firebase storage api.
Also change this:
var storageRef = firebase.storage().storage.ref()('me/' + file.name);
Into this:
var storageRef = firebase.storage().ref('me/' + file.name);
Check this for more info:
https://firebase.google.com/docs/storage/web/create-reference

change you script main.js position like this
<script>
var config = {
apiKey: "xxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
projectId: "xxxx",
storageBucket: "xxxx.appspot.com",
messagingSenderId: "xxxxx"
};
firebase.initializeApp(config);
const db = firebase.firestore();
db.settings({timestampsInSnapshots:true});
</script>
//to here
<script src="javascripts/main.js"></script>

Check whether your firebase import is correct. It won't work if you imported it incorrectly.
It should be like this
import * as firebase from "firebase/app";
Not this
import * as firebase from "firebase";

no alert after firebase called

I can't show alert after called firebase
<script>
var config = {
apiKey: "AIzaSyCnmZWNwp3CfjXDcDL5MADIej6GwvxWEtQ",
authDomain: "dsmweb-ba185.firebaseapp.com",
databaseURL: "https://dsmweb-ba185.firebaseio.com",
storageBucket: "dsmweb-ba185.appspot.com",
};
firebase.initializeApp(config);
alert('asdf');
</script>
This is my source code, and what is wrong?
something happend in " firebase.initializeApp(config); "