I am currently working on a project using vuejs and firebase. I encountered an issue while trying to import firestore. When I accessed my page, I saw this error message in the console: ReferenceError: require is not defined
I attempted to place the import section within the mounted() method, but I received an error stating that the import should be placed at the top, so that's where I placed it.
Below is the HTML content of my register.html file:
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-firestore.js"></script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyCNYH-sKZZXZhZt5LxQSDqwet7OTo5KgHM",
authDomain: "thelogoagency-3a11d.firebaseapp.com",
databaseURL: "https://thelogoagency-3a11d.firebaseio.com",
projectId: "thelogoagency-3a11d",
messagingSenderId: "101296201242",
appId: "1:101296201242:web:00d0e7e3554b518d"
};
firebase.initializeApp(firebaseConfig);
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="register.js"></script>
The beginning of my register.js file:
// Required for side-effects
require("firebase/firestore");
var app = new Vue({
el: "#root",
data: {
burgerClass: "navbar-burger",
menuClass: "navbar-menu",
mobileMenuIsActive: "",
mobileMenuHasBeenClicked: false,
firstNameInput: "",
lastNameInput: "",
emailInput: "",
passwordInput: "",
authError : "",
emailErrorClass : "",
emailErrorHelp : "",
passwordErrorClass : "",
passwordErrorHelp : "",
inputClass: "input ",
nameErrorHelp: "",
isLoading: false,
firebase: firebase,
db: null,
numberOfInit: 0
},
And the mounted() function:
if(this.numberOfInit == 0) {
firebase.initializeApp({
apiKey: 'AIzaSyCNYH-sKZZXZhZt5LxQSDqwet7OTo5KgHM',
authDomain: 'thelogoagency.tk',
projectId: '1:101296201242:web:00d0e7e3554b518d'
});
this.db = firebase.firestore();
this.numberOfInit++;
this.db.collection("users").add({
first: "Ada",
last: "Lovelace",
born: 1815
})
.then(function(docRef) {
console.log("Document written with ID: ", docRef.id);
})
.catch(function(error) {
console.error("Error adding document: ", error);
});
}
Even though I followed the documentation from Firebase, it still doesn't seem to work as expected. I appreciate any help or guidance. Thank you!