CODEWITHSUNDEEP
firebasevue.jsgoogle-cloud-firestorenuxt.js
Simon
Simon

Reputation: 387

firebase.firestore.GeoPoint(long, lat) is not a constructor

I need your help...

I am unable to save an object with geodata to my firestore (from a vue application).

Objects without a geopoint are saved to firestore, but as soon as I try to add a document with the GeoPoint Class, I get the following error:

Uncaught TypeError: this.$db.GeoPoint is not a constructor
at VueComponent.addProperty (index.2ad219460d4ddfd5635c.hot-update.js:226)
at click (index.3901b064c6620cd7292b.hot-update.js:149)
at invoker (commons.app.js:10574)
at HTMLButtonElement.fn._withTask.fn._withTask [...]

'This.$db' is a reference to the firebase.firestore() object -> since it works without GeoPoints this import/injection should be correct (I also tried it with the direct import of the firebase-instance without success.

My function looks as follows:

this.$db.collection("property").add({
 meta_data:this.meta_data,
 address: this.address,
  location: new this.$db.GeoPoint(8.241, 46.838)
})
  .then(function(docRef) {
    console.log("Document written with ID: ", docRef.id);
  })
  .catch(function(error) {
    console.error("Error adding document: ", error);
  });

My dependencies:

"dependencies": {
"@mapbox/mapbox-gl-geocoder": "^2.3.0",
"@mapbox/mapbox-sdk": "^0.4.1",
"firebase": "^5.5.3",
"geojson": "^0.5.0",
"gsap": "^2.0.2",
"mapbox-gl": "^0.49.0",
"nuxt": "^2.1.0",
"vuefire": "^1.4.5",
"vuetify": "^1.2.9"
},

Do I miss something? Any help is appreciated! Thanks a lot

Upvotes: 1

Views: 1757

Answers (3)

Simon
Simon

Reputation: 387

I found the root cause of my problem. My firestore import was incorrect.

This.$db # -> was a reference to firebase.firestore()

What it should be instead

This.$db # -> should be a reference to firebase.firestore (without parentheses())

therefore the constructor was not available.

Upvotes: 3

Simon Klimek
Simon Klimek

Reputation: 352

I have the same error in my vue application, I referred to external firebase file when I was creating geopoint, the solution in my case was adding: import { firebase } from '@firebase/app';

Upvotes: 0

Mauricio Duque
Mauricio Duque

Reputation: 1

I have a not pretty solution. I recall the firebase module and use the functionality raw. Just in my own componente.

<script>
import firebase from 'firebase/app'
import 'firebase/storage'

export default {
    beforeMount() {
        const geopoint = firebase.firestore
        console.log(new geopoint.GeoPoint(-0.180653, -78.467834))
    },
}
</script>

Upvotes: 0

Related Questions