_vue2.default.use is not function on vue2-google-maps component

[hagi4u]

Hi there.
I'm using vue2-google-maps component.

when i ran styleguide, i had messages that

Cannot parse resources/assets/js/components/quark/Map.vue: TypeError: _vue2.default.use is not a function

It usually means that vue-docgen-api don’t understand your source code or when using third-party libraries, try to file an issue here:
https://github.com/vue-styleguidist/vue-docgen-api/issues

Code that using vue2-google-maps is

import * as VueGoogleMaps from 'vue2-google-maps';

Vue.use(VueGoogleMaps, {
  load: {
    key: 'APIKEY'
  }
})

I think to have problem that using third-party plugin
how to solve this problem?

[rafaesc]

Hi @hagi4u,

I think that I understand the problem but I need to confirm it, can you share Map.vue?

Regards

[hagi4u]

Okay,
please check my code.

When i add comment vue.use scope, it doesn't show error message

<template>
  <gmap-map
    :center="position"
    :zoom="zoom"
    style="width: 100%; height: 300px"
  >
    <gmap-marker :key="index" v-for="(m, index) in markers"
      :position="m.position"
      :clickable="true"
      :draggable="true"

      @click="handleMarkerClick(m)"
    ></gmap-marker>
  </gmap-map>
</template>

<script>
import Vue from 'vue';
import * as VueGoogleMaps from 'vue2-google-maps';

Vue.use(VueGoogleMaps, {
  load: {
    key: 'KEY!!'
  }
})

export default {

  name: 'Map',
  props: {
    zoom:{
      type: Number,
      default: 14,
    },
    initialPosition: {
      type: Object,
      default(){
        return {
          lat: 37.49794199999999,
          lng: 127.02762099999995
        }
      }
    },
    markers: {
      type: Array,
      default() {
        return [{
          position: {
            lat: 37.49794199999999,
            lng: 127.02762099999995
          }
        }]
      }
    }
  },
  data () {
    return {
      position: this.initialPosition
    }
  },
  methods: {
    handleMarkerClick(obj){
      this.position = obj.position
    }
  }
}
</script>

<style lang="css" scoped>
</style>

<doc>

``` ```

[rafaesc]

Perfect @hagi4u,

You can already update to version 2.2.2, of vue-docgen-api,

Regards

[klarkc]

Still happening here with vue-styleguidist package 1.3.3, even installing the new 2.2.2 vue-docgen-api package.

[rafaesc]

It's true @klarkc,

Sorry for that, I hadn't tested it. Ok, on the version 2.2.3, it's working.

Regards

[0m4r]

I can experience this, I have a component with

import { ClientTable } from 'vue-tables-2'

Vue.use(ClientTable)

export default {
   [code]
}

and then I get this warning:

Warning: Cannot parse src/components/mycomponent.vue: TypeError: _vue2.default.use is not a function

It usually means that vue-docgen-api does not understand your source code or when using third-party libraries, try to file an issue here:
https://github.com/vue-styleguidist/vue-docgen-api/issues

[rafaesc]

@0m4r it fixed on 2.3.9 version

[0m4r]

@rafaesc is this the same version in the latest vue-styleguidist (1.7.6?) because I am getting that error there. Thanks!

[rafaesc]

@0m4r actually I created a new version to fix it, the latest vue-styleguidist is 1.7.7