$google undefined when using `nuxt run build && npm run start`

[zsalzbank]

When I run in development (npm run dev), everything works. When I build and serve the result, I get TypeError: Cannot read property 'maps' of undefined.

[WilliamDASILVA]

@zsalzbank Could you be more specific ?. Do you have some logs?
I can't reproduce it :/

[zsalzbank]

The error I get in my browser console is:

TypeError: Cannot read property 'maps' of undefined
    at a.mounted (index.6688e3fbf0fc3cdc9711.js:2)
    at we (vendor.cc013dec96491fcb673b.js:2)
    at Object.insert (vendor.cc013dec96491fcb673b.js:2)
    at A (vendor.cc013dec96491fcb673b.js:2)
    at un.__patch__ (vendor.cc013dec96491fcb673b.js:2)
    at un.t._update (vendor.cc013dec96491fcb673b.js:2)
    at un.<anonymous> (vendor.cc013dec96491fcb673b.js:2)
    at Te.get (vendor.cc013dec96491fcb673b.js:2)
    at new Te (vendor.cc013dec96491fcb673b.js:2)
    at t (vendor.cc013dec96491fcb673b.js:2)

The code where I am trying to use this.$google is in a component (not in the pages directory):

mounted () {
  this.autocomplete = new this.$google.maps.places.Autocomplete(this.$refs.search, {
    types: [
      '(regions)'
    ],
    componentRestrictions: {
    country: 'US'
    }
  })
}

If I replace this.$google with window.google, everything works properly. If I keep the code as displayed above and run in development mode (npm run dev), everything works properly. If I keep the code as above and run npm run build && npm run start, then I get the error as indicated.

[WilliamDASILVA]

@zsalzbank Just tested and indeed, I get the error sometimes when the Google script is not loaded yet.
I'll take a more in-deep look to that. Can't you check if the $google object is defined before using it in the mean time?

mounted () {
   if (this.$google) {
      this.autocomplete = new this.$google....
   }
}

[zsalzbank]

I could, but I still need that code to be called regardless (I'm using window.google for now as a workaround). Don't think I can watch this.$google to make sure it is defined - can I?

[sergioalvz]

It's happening the same for nuxt generate but, in this case, it does not even work with window.google instead of this.$google.

[WilliamDASILVA]

@zsalzbank @sergioalvz Alright, fixed the issue of $google being undefined in the creation hook for the v1.5.5. It injects an empty object, then remplace the property in the vue prototype with the getter referencing $google.

home.vue?4d24:62 Google from created in page:  {maps: {…}}
HomeHero.vue?1269:56 Google from created in component:  {maps: {…}}
HomeHero.vue?1269:59 Google from mounted in component:  {maps: {…}}
home.vue?4d24:65 Google from mounted in page:  {maps: {…}}

Could not reproduce the build / generate issue but it may fix it.
Could you confirm ?

[zsalzbank]

Still having the same problem unfortunately.

[unkndono]

Hi there. 👍 Same problem for me, after npm run build & npm run start,

TypeError: Cannot read property 'maps' of undefined
this.autocomplete = new this.$google.maps.places.Autocomplete(this.input)

My module is configured like this:

['nuxt-google-maps-module', {
      defer: false,
      async: false,
      key: 'MyKey',
      libraries: [
          'places',
      ]
}],

[polidog]

I had same problem.
But i solved use maps-module:loaded event.

mounted() {
  const execute = () => {
    // this.autocomplete = new this.$google....
  }
  
  if (this.$google) {
    execute();
  } else {
    const callback = () => {
      execute();
      window.removeEventListener('maps-module:loaded', callback)
    }
    window.addEventListener('maps-module:loaded', callback)
  }
}

[dimassrio]

Same here after generating, seems like the this.$google is not defined yet when it runs.

[david-j-davis]

Same issue here, thanks to @polidog, that fixed worked for me.

[antony]

I'm getting the same issue even with a regular npm run dev.

[rafaelmagalhaes]

doesn't seem to work in production only on dev environment

[tguelenman]

Had the same problem, @polidog workaround fixed it.