Trying to follow the google Getting Started With Cloud Firestore on the Web - Firecasts
For some reason I'm getting this error:
Uncaught Error: Cannot instantiate firebase-firestore - be sure to load firebase-app.js first.
But I believe I have everything done as it should be. What is wrong with this?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src=".5.3/firebase.js"></script>
<script src=".5.3/firebase-firestore.js"></script>
</head>
<body>
<h1 id="hotDogOutput">Hot dog status:</h1>
<input type="textfield" id="latestHotDogStatus">
<button id="saveButton">Save</button>
<script src="./app.js"></script>
</body>
</html>
Javascript
// Initialize Firebase
var config = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "..."
};
firebase.initializeApp(config);
const firestore = firebase.firestore();
const settings = {/* your settings... */ timestampsInSnapshots: true};
firestore.settings(settings);
const docRef = firestore.doc("samples/sandwichData");
const outputHeader = document.querySelector("#hotDogOutput");
const inputTextField = document.querySelector("#latestHotDogStatus");
const saveButton = document.querySelector("#saveButton");
saveButton.addEventListener("click", function () {
const textToSave = inputTextField.value;
console.log("I am going to save " + textToSave + " to Firestore");
docRef.set({
hotDogStatus: textToSave
}).then(function() {
console.log("Status Saved!");
}).catch(function(error) {
console.log("Got an error: ", error)
});
})
Trying to follow the google Getting Started With Cloud Firestore on the Web - Firecasts
For some reason I'm getting this error:
Uncaught Error: Cannot instantiate firebase-firestore - be sure to load firebase-app.js first.
But I believe I have everything done as it should be. What is wrong with this?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://www.gstatic./firebasejs/5.5.3/firebase.js"></script>
<script src="https://www.gstatic./firebasejs/5.5.3/firebase-firestore.js"></script>
</head>
<body>
<h1 id="hotDogOutput">Hot dog status:</h1>
<input type="textfield" id="latestHotDogStatus">
<button id="saveButton">Save</button>
<script src="./app.js"></script>
</body>
</html>
Javascript
// Initialize Firebase
var config = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "..."
};
firebase.initializeApp(config);
const firestore = firebase.firestore();
const settings = {/* your settings... */ timestampsInSnapshots: true};
firestore.settings(settings);
const docRef = firestore.doc("samples/sandwichData");
const outputHeader = document.querySelector("#hotDogOutput");
const inputTextField = document.querySelector("#latestHotDogStatus");
const saveButton = document.querySelector("#saveButton");
saveButton.addEventListener("click", function () {
const textToSave = inputTextField.value;
console.log("I am going to save " + textToSave + " to Firestore");
docRef.set({
hotDogStatus: textToSave
}).then(function() {
console.log("Status Saved!");
}).catch(function(error) {
console.log("Got an error: ", error)
});
})
2 Answers
Reset to default 6Either import the entire firebase.js or just firebase-app.js followed by firebase-firestore.js. What's happening here is that the firebase-firestore.js expects firebase-app.js (The core Firebase client) and not the entire library.
<script src="https://www.gstatic./firebasejs/5.5.3/firebase-app.js"></script>
<script src="https://www.gstatic./firebasejs/5.5.3/firebase-firestore.js"></script>
Helpful Guide: https://firebase.google./docs/web/setup
If you are using real time database, then add only these two script srcs:
<script src="https://www.gstatic./firebasejs/5.9.3/firebase-app.js"></script>
<script src="https://www.gstatic./firebasejs/5.9.3/firebase-database.js"></script>