Estoy tratando de vincular mi formulario de contacto html con firebase, pero me encuentro con un error:
Error de referencia no detectado: firebase no está definido
en mi archivo main.js, definí bien mi CDN en mi archivo html, pero en la línea main.js es donde enfrento este error. Instalé Firebase con éxito en mi proyecto, pero aún tengo el mismo problema en la línea a continuación.
var emailRef = firebase.database().ref('emails');Aquí en mi código main.js
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 }); }Y en mi archivo index.html aquí está mi formato CDN
<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>Su segundo fragmento está importando la versión 9 de Firebase en formato de módulo ES aquí:
<script type="module"> Pero luego, en el primer fragmento, intenta usar Firebase en su sintaxis anterior con firebase.database() .
Eso no funcionará: tendrá que usar el nuevo formato y sintaxis de importación, o usar la sintaxis de espacio de nombres más antigua.
El equivalente a este código v8:
var emailRef = firebase.database().ref('emails');En la sintaxis modular v9 sería:
import { getDatabase, ref } from "firebase/database"; // Get a reference to the database service const database = getDatabase(app); var emailRef = ref(database, 'emails');Y este código en v8:
function saveMessage(Fullname, Email,){ var newEmailRef = emailRef.push(); newEmailRef.set({ Fullname: Fullname, Email:Email }); }Se vería así en v9 :
import { getDatabase, ref, push, set } from "firebase/database"; function saveMessage(Fullname, Email,){ var newEmailRef = push(emailRef); set(newEmailRef, { Fullname: Fullname, Email:Email }); }Cuando trabaje con esta combinación de sintaxis antigua y nueva, le recomiendo tener a mano la guía de actualización .