0
490
VistasImport firebase firestore from CDN JS not working
I am importing Firebase Firestore from CDN to run on a local server. I imported it as the documentation says, right here: https://firebase.google.com/docs/web/alt-setup
My code :
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'
The problem: Firebase app and firebase auth are imported and work perfectly however, Firestore is not being imported. I get this error:
Uncaught SyntaxError: The requested module 'https://www.gstatic.com/firebasejs/9.6.3/firebase-firestore.js' does not provide an export named 'firestore'
This is my first web project using firebase and I dont know how to move forward. Any help or suggestion will be appreciated by this newbie. If you need anymore information let me know, Thanks.
3 Respuestas
Responde la pregunta0
I think the source has been deprecated. Cause the explanation written like this, from this source https://firebase.google.com/docs/web/alt-setup#from-the-cdn
For most Firebase Web apps we strongly recommend using SDK version 9 via npm.
I found two ways, in version 8 you can still use that way.
<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>
But if you want use in version 9, you have to use npm.
npm install firebase@9.4.1 --save
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
You can visit: https://firebase.google.com/docs/firestore/quickstart#web-version-9
Hopefully this can help you.
0
One way to import is, first create a file called firebase.js and paste this code :
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"));
};
Now, you can create a new file called main.js and paste this code:
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());
});
});
Finally create the html file index.html and paste this code:
<!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>
Sample project:
That is all, i hope it works for you 😉
0
Have you type this in script tag
<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 ?