Cannot read property 'props' of undefined

Question

Cannot read property 'props' of undefined

Closed this issue 5 years ago · 5 comments

Hi, thanks for your awesome work.

I'm developing an intranet website using Nuxt.js.
I've configured the vue-google-signin-button component in a Nuxt's basic way, but it shows Cannot read property 'props' of undefined error and doesn't work.

Where am I wrong?
Are there any extra steps needed when using with Nuxt.js?

To reproduce

https://codesandbox.io/s/vue-google-signin-button-cannot-read-property-props-of-undefined-l4lxb

The above code will result in:

Environment

nuxt: v2.9.2
vue-google-signin-button: v1.0.4

Answer 1 · 2019-09-18T03:12:09.000Z

I get a different error when I use that link.

Have you done this?

Important: https://apis.google.com/js/api:client.js must be included as a <script> in your web app, as this plugin depends on it.

Answer 2 · 2019-09-18T17:23:59.000Z

@ThomasEdwards Thanks for the reply.

Have you done this?

Important: https://apis.google.com/js/api:client.js must be included as a <script> in your web app, as this plugin depends on it.

Yes.

// nuxt.config.ts L.19
    script: [{ src: "https://apis.google.com/js/api:client.js" }]

The above configuration surely includes <script> in <head>:

I get a different error when I use that link.

What error did you get?

I got this error with Google Chrome, but it may claim a different error message if you use other browser. For example, when opened with Safari, the error message is undefined is not an object (evaluating 'Ctor.options.props').

Answer 3 · 2019-09-20T06:08:04.000Z

Ah yeah that’s the message I got in Firefox.

I don’t know the internals of Nuxt well enough at all, but we are using this with Nuxt. We are using a plugin to import it:

import Vue from 'vue'
import GSignInButton from 'vue-google-signin-button'

Vue.use(GSignInButton)

Not sure if this is required for it to work with Nuxt?

Answer 4 · 2019-09-29T02:05:28.000Z

OK problem solved. I made two mistakes:

1. I should import vue-google-signin-button as a plugin globally, not as a custom component locally.

At first, I imported it within an index.vue using local registration method:

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  components: {
    GSignInButton: () => import('vue-google-signin-button')
  }
})
export default class Page extends Vue {
  // omitted
}
</script>

But I should create the file plugins/vue-google-signin-button.ts and import it from nuxt.config.ts as a vue plugin:

// plugins/vue-google-signin-button.ts
import Vue from 'vue'
import GSignInButton from 'vue-google-signin-button'
Vue.use(GSignInButton)

// nuxt.config.ts
plugins: [ '@/plugins/vue-google-signin-button.ts' ]

I thought the above two code will do the same thing... I misunderstood.

2. I should refer the component with kebab-case, not camel case.

The following claims Unknown custom element error.

<GSignInButton
  :params="googleSignInParams"
  @success="onSignInSuccess"
  @error="onSignInError"
>
  Sign in with Google
</GSignInButton>

This works fine:

<g-signin-button
  :params="googleSignInParams"
  @success="onSignInSuccess"
  @error="onSignInError"
>
  Sign in with Google
</g-signin-button>

I also misunderstood that there's no difference between two cases.

@ThomasEdwards Thanks!

Answer 5 · 2019-10-01T02:36:45.000Z

Ah yes! I have eslint correcting my lack-of-kebab case because I too have had this problem more than once... thanks for documenting, may help Nuxters in the future.