CODEWITHSUNDEEP
vue.js
Rodrigo Sasaki
Rodrigo Sasaki

Reputation: 7226

Property does not exist on type 'default'

I am a beginner with VueJS, I tried looking around for some tips on this but I couldn't find anything.

I am maintaining a Vue app and I started implementing a Google SSO sign-in flow. To do that I used vue-google-oauth2

So in my main.ts I do this:

Vue.use(GAuth, {
  clientId: "client_id",
  scope: "profile email",
  prompt: "select_account"
});

and in my sign in component I have this:

export default class extends Vue {
  private googleHandleClick() {
    this.$gAuth.signIn()
      .then(GoogleUser => {
        this.isSignIn = this.$gAuth.isAuthorized
      })
      .catch(error  => {
        //on fail do something
      })
  }
}

However I get a build error on this.$gAuth that states the following:

Property '$gAuth' does not exist on type 'default'.

The code works in runtime, which indicates that $gAuth does in fact exist, but for some reason the type checking is messed up in build time, which is disrupting CI and other things.

Basically the question is: How do I make Vue's this know that that property exists, and the type it has

Upvotes: 1

Views: 1801

Answers (1)

Matt U
Matt U

Reputation: 5118

You can check this discussion on the Vue forum. The answer states:

You or some other plugin augmented the Vue prototype by adding the $gAuth property.

The default types for Vue don’t include this property, of course, so without any additional adjustments from either the plugin’s author or yourself, Typescript will complain that the type of Vue doesn’t have a property called $gAuth.

It links to the docs, which shows this example (one of a few):

For example, to declare an instance property $myProperty with type string:

// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'

// 2. Specify a file with the types you want to augment
//    Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
  // 3. Declare augmentation for Vue
  interface Vue {
    $myProperty: string
  }
}

Upvotes: 2

Related Questions