I am importing Firebase Firestore from CDN to run on a local server. I imported it as the documentation says, right here:
My code :
import { initializeApp } from '.0.0/firebase-app.js';
import { getAuth, createUserWithEmailAndPassword } from '.0.0/firebase-auth.js';
import { firestore } from '.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 '.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.
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./docs/web/alt-setup
My code :
import { initializeApp } from 'https://www.gstatic./firebasejs/9.0.0/firebase-app.js';
import { getAuth, createUserWithEmailAndPassword } from 'https://www.gstatic./firebasejs/9.0.0/firebase-auth.js';
import { firestore } from 'https://www.gstatic./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./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.
Share Improve this question asked Jan 16, 2022 at 16:32 ShahzaibShahzaib 1131 gold badge1 silver badge12 bronze badges6 Answers
Reset to default 6I think the source has been deprecated. Cause the explanation written like this, from this source https://firebase.google./docs/web/alt-setup#from-the-cdn
For most Firebase Web apps we strongly remend 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./firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic./firebasejs/8.10.0/firebase-firestore.js"></script>
</body>
But if you want use in version 9, you have to use npm.
npm install [email protected] --save
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
You can visit: https://firebase.google./docs/firestore/quickstart#web-version-9
Hopefully this can help you.
One way to import is, first create a file called firebase.js and paste this code :
import { initializeApp } from "https://www.gstatic./firebasejs/9.6.10/firebase-app.js";
import { getFirestore, getDocs, collection } from "https://www.gstatic./firebasejs/9.6.10/firebase-firestore.js";
//add your credentials from firebase project
const firebaseConfig = {
apiKey: "YOUR-apiKey-nCVgNHJXTs",
authDomain: "YOUR-authDomain.firebaseapp.",
projectId: "YOUR-projectId-fb",
storageBucket: "YOUR-storageBucket-fb.appspot.",
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