olefirenko / vue-google-autocomplete

A Vue.js autosuggest component for the Google Places API.
https://olefirenko.github.io/vue-google-autocomplete/
MIT License
507 stars 258 forks source link

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

Open darior87 opened 6 years ago

darior87 commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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

bhavinjr commented 5 years ago

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 commented 4 years ago

Same, but without no-ssr tag:

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