e.$OneSignal.on is not a function

[voxivoid]

I'm working on a project that uses @nuxtjs/pwa along with @nuxtjs/onesignal and I am having an issue while setting up a listener to the subscriptionChange event on mounted inside of my default layout component. Sometimes it throws e.$OneSignal.on is not a function and I can't get why. On the setup, I've added the onesignal module before the pwa as the documentation says. This is what I'm doing in my component:

mounted() {
    this.$OneSignal.push(() => {
      this.$OneSignal.on('subscriptionChange', isSubscribed => {
        if (isSubscribed) {
          this.$OneSignal.getUserId().then(deviceId => this.addDeviceId(deviceId));
        }
      });
    });
},

I've tried to log the this.$OneSignal and when I get the error it prints an array with all the functions that were pushed into this.$OneSignal instead of the OneSignal object with all the methods, which is weird because this code should never be called before loading the script. Any help would be appreciated!

Thanks!

[ghost]

This issue as been imported as question since it does not respect pwa-module issue template. Only bug reports and feature requests stays open to reduce maintainers workload. If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically. Your question is available at https://cmty.app/nuxt/pwa-module/issues/c56.

[juniorgarcia]

At the lines 2 and 3: Do you realize that this inside arrow functions can be messed up? As Mozilla Developers site says:

An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target

Try changing that to:

mounted() {
  this.$OneSignal.push(function() {
    this.$OneSignal.on('subscriptionChange', function(isSubscribed) {
      if (isSubscribed) {
        this.$OneSignal.getUserId().then(function(deviceId) { this.addDeviceId(deviceId) });
      }
    });
  });
},

As a rule of thumb: If you need to access this context, don't make use of arrow functions, instead, use default functions notation.

Also, duplicate: #c55

[voxivoid]

I know how arrow functions work, the this.$OneSignal.on that is being called is the one from the component scope. Beside this, I'm also following the module docs and they use arrow functions. I tried what you said but it says the this is undefined on the inside function.

[juniorgarcia]

Try to isolate the this into a variable, then use that variable inside your closures:

mounted() {
  let self = this;
  this.$OneSignal.push(() => {
    self.$OneSignal.on('subscriptionChange', (isSubscribed) => {
      if (isSubscribed) {
        self.$OneSignal.getUserId().then((deviceId) => {
          self.addDeviceId(deviceId)
        });
      }
    });
  });
},

[ghost]

@voxivoid Did you manage to fix this? I've the same issue when in production build. Everything works fine on my dev mode. Please note that I am using this inside a component and the mode of my nuxt application is SSR also am not using any docker services. Please let me know, it'll be a great help. `

`

[chhumsina]

@voxivoid Did you manage to fix this? I've the same issue when in production build. Everything works fine on my dev mode. Please note that I am using this inside a component and the mode of my nuxt application is SSR also am not using any docker services. Please let me know, it'll be a great help. `

<div id="my-notification-button" v-if="!isSubscribed" @click="subscribe">Subscribe to Notifications

<div id="my-notification-button" v-else @click="unsubscribe">Un-Subscribe from Notifications

`

Me also. Local working well but production error