vue-google-autocomplete & nuxt 2.1.0 - cannot nuxt-generate it - error when loading the page

[darior87]

SO

I'm having problems when loading the page containing vue-google-autocomplete module. the problem is shown below

✖ error /.../node_modules/vue-google-autocomplete/src/VueGoogleAutocomplete.vue:1
  (function (exports, require, module, __filename, __dirname) { <template>
  ^

  SyntaxError: Unexpected token <
  at new Script (vm.js:74:7)
  at createScript (vm.js:246:10)
  at Object.runInThisContext (vm.js:298:10)
  at Module._compile (internal/modules/cjs/loader.js:670:28)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
  at Module.load (internal/modules/cjs/loader.js:612:32)
  at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
  at Function.Module._load (internal/modules/cjs/loader.js:543:3)
  at Module.require (internal/modules/cjs/loader.js:650:17)
  at require (internal/modules/cjs/helpers.js:20:18)
  at r (/Users/dariorusignuolo/Desktop/phpstorm/jukemotion-booking/jukemotion-booking-client/node_modules/nuxt/node_modules/vue-server-renderer/build.js:8341:16)
  at Object.vue-google-autocomplete (server-bundle.js:8677:18)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./components/form/j-search.vue?vue&type=script&lang=js& (components/form/j-search.vue?cfb9:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../components/form/j-search.vue?vue&type=script&lang=js& (components/form/j-search.vue?00ca:1:0)

The version is 1.1.0 (the latest) and the nuxt version is 2.1.0 while the node version is 10.4.1

I'm facing the exact problem even when starting the nuxt generate command.

Tried also loading globally with placing the load of this module inside the plugins using

Vue.component('vue-google-autocomplete', VueGoogleAutocomplete); without any luck.

Any suggestions?

[pitapaya]

Hello darior87,

I ran into the issue you had. The problem is that the google script isn't loaded. I found a way to make it work, but I'm not sure if it's a good practice.

My plugin file contains the content as you:

import Vue from 'vue';
import VueGoogleAutocomplete from 'vue-google-autocomplete';

Vue.use( VueGoogleAutocomplete );

Vue.component('vue-google-autocomplete', VueGoogleAutocomplete);

But in the nuxt.config file, I added a line in head:

script: [{ src: "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places "}],

[fathi-hindi]

Any update in this issue. I'm still facing the same issue

[bhavinjr]

I had the same issue, I solve using this trick

In template

 <no-ssr>
    <vue-google-autocomplete
    id="address"
    classname="class"
    placeholder="Start typing"
    v-on:placechanged="getAddressData">
   </vue-google-autocomplete>
</no-ssr>

In Script

components: {
     VueGoogleAutocomplete: () => import('vue-google-autocomplete')
},
methods: {
    getAddressData(addressData, placeResultData, id) {
    }
}

Don't forget to add script in nuxt.config file

That's it, Good luck :)

[eafanasev]

Same, but without no-ssr tag:

nuxt.config: plugins: [ { src: '~plugins/vue-google-autocomplete', ssr: false } ],