0
492
ViewsImportar firebase firestore desde CDN JS no funciona
Estoy importando Firebase Firestore desde CDN para ejecutarlo en un servidor local. Lo importé como dice la documentación, justo aquí: https://firebase.google.com/docs/web/alt-setup
Mi código :
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js'; import { getAuth, createUserWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js'; import { firestore } from 'https://www.gstatic.com/firebasejs/9.6.3/firebase-firestore.js'El problema: la aplicación Firebase y la autenticación de Firebase se importan y funcionan perfectamente; sin embargo, Firestore no se importa. me sale este error:
Uncaught SyntaxError: The requested module 'https://www.gstatic.com/firebasejs/9.6.3/firebase-firestore.js' does not provide an export named 'firestore'Este es mi primer proyecto web usando firebase y no sé cómo seguir adelante. Cualquier ayuda o sugerencia será apreciada por este novato. Si necesita más información hágamelo saber, gracias.
3 answers
Answer question0
Creo que la fuente ha sido obsoleta. Causa la explicación escrita así, de esta fuente https://firebase.google.com/docs/web/alt-setup#from-the-cdn
Para la mayoría de las aplicaciones web de Firebase, recomendamos enfáticamente usar la versión 9 del SDK a través de npm.
Encontré dos formas, en la versión 8 todavía puedes usar esa forma.
<body> <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services --> <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> </body>Pero si desea usar en la versión 9, debe usar npm.
npm install firebase@9.4.1 --save import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore";Puede visitar: https://firebase.google.com/docs/firestore/quickstart#web-version-9
Espero que esto pueda ayudarte.
0
Una forma de importar es crear primero un archivo llamado firebase.js y pegar este código:
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"; import { getFirestore, getDocs, collection } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"; //add your credentials from firebase project const firebaseConfig = { apiKey: "YOUR-apiKey-nCVgNHJXTs", authDomain: "YOUR-authDomain.firebaseapp.com", projectId: "YOUR-projectId-fb", storageBucket: "YOUR-storageBucket-fb.appspot.com", messagingSenderId: "YOUR-messagingSenderId", appId: "YOUR-appId-web:11c8d54e0" }; const app = initializeApp(firebaseConfig); const db = getFirestore(); //create your custom method export const getWolfs = () => { return getDocs(collection(db, "yourNameCollection")); };Ahora, puede crear un nuevo archivo llamado main.js y pegar este código:
import { getWolfs } from './firebase.js'; //suppose you want to display the list of wolves in the browser console window.addEventListener("DOMContentLoaded", async (e) => { const querySnapshot = await getWolfs(); querySnapshot.forEach((doc) => { console.log(doc.data()); }); });Finalmente crea el archivo html index.html y pega este código:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>firebase</title> </head> <body> <h2>wolves</h2> <!--main app--> <script type="module" src="./main.js"></script> </body> </html>Proyecto de muestra:
Eso es todo, espero que te sirva 😉
0
¿Has escrito esto en la etiqueta del script?
<body> <script type="module"> // ... // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { // ... }; // Initialize Firebase const app = initializeApp(firebaseConfig); </script> </body> type=module ?