Heroku/Nuxt not picking up on a mixin? - heroku

Question

I have a button that re-directs to a stripe checkout page - which works fine on my local machine, but I'm receiving this error in my heroku logs when I try it out in production:
2021-04-07T14:22:30.664437+00:00 app[web.1]:
2021-04-07T14:22:30.664454+00:00 app[web.1]: ERROR Cannot read property 'subscriptions' of null
2021-04-07T14:22:30.664454+00:00 app[web.1]:
2021-04-07T14:22:30.664455+00:00 app[web.1]: at a.checkActiveSubscription (mixins/stripeSubscription.js:10:0)
2021-04-07T14:22:30.664455+00:00 app[web.1]: at a.hasAnyActiveSubscription (pages/profile/billing/index.vue:186:0)
2021-04-07T14:22:30.664456+00:00 app[web.1]: at a.hasAnyActiveSubscription (node_modules/vue/dist/vue.runtime.common.prod.js:6:29698)
2021-04-07T14:22:30.664457+00:00 app[web.1]: at a.render (pages/profile/billing/index.vue)
2021-04-07T14:22:30.664457+00:00 app[web.1]: at a.t._render (node_modules/vue/dist/vue.runtime.common.prod.js:6:35273)
2021-04-07T14:22:30.664458+00:00 app[web.1]: at node_modules/vue-server-renderer/build.prod.js:1:70637
2021-04-07T14:22:30.664458+00:00 app[web.1]: at Yi (node_modules/vue-server-renderer/build.prod.js:1:67201)
2021-04-07T14:22:30.664458+00:00 app[web.1]: at io (node_modules/vue-server-renderer/build.prod.js:1:70613)
2021-04-07T14:22:30.664458+00:00 app[web.1]: at ro (node_modules/vue-server-renderer/build.prod.js:1:70244)
2021-04-07T14:22:30.664459+00:00 app[web.1]: at eo (node_modules/vue-server-renderer/build.prod.js:1:67491)
2021-04-07T14:22:30.664459+00:00 app[web.1]:
Index.vue:
import checkActiveSubscription from "#/mixins/stripeSubscription.js";
export default {
mixins: [checkActiveSubscription],
....
}
computed: {
hasAnyActiveSubscription() {
return this.checkActiveSubscription();
},
stripeSubscription.js:
export default {
methods: {
checkActiveSubscription() {
/*
check if user has any active subscription
if so, the user should be able to manage their existing billing
else - show buttons to create new subscription plans
*/
let subscriptions = this.$store.getters.user.subscriptions;
let hasActiveSubscription = false;
subscriptions.some((element, index) => {
if (element.status == "active") {
hasActiveSubscription = true;
}
});
return hasActiveSubscription;
},
}
}
Any pointers? Is the issue on Nuxt, Stripe, or Heroku?
My Nuxt store looks like this (user.js inside a folder called store):
export const state = () => ({
CSRFToken: null,
isLoggedIn: false,
user: null,
})
export const mutations = {
setCSRFToken(state, token) {
state.CSRFToken = token
},
setLoggedIn(state, bool) {
state.isLoggedIn = bool
},
setUser(state, user) {
state.user = user
},
}
export const actions = {
async nuxtServerInit(vuex, context) {
console.log("hello?")
const user = await context.app.$axios.$get(`/account/session/`, {
credentials: "include",
});
vuex.dispatch("setLoggedIn", user.isAuthenticated);
const { data, headers } = await this.$axios.get('/account/csrf/', {
withCredentials: true
});
const csrfToken = headers["x-csrftoken"];
vuex.dispatch("setCSRFToken", csrfToken)
if (user.isAuthenticated) {
const userDetails = await context.app.$axios.$get(`/account/current/`, {
headers: {
"X-CSRFToken": csrfToken
},
});
vuex.dispatch("setUser", userDetails);
}
},
setCSRFToken({ commit }, token) {
commit("setCSRFToken", token);
},
setLoggedIn({ commit }, bool) {
commit("setLoggedIn", bool)
},
setUser({ commit }, user) {
commit("setUser", user)
}
}
export const getters = {
CSRFToken: state => {
return state.CSRFToken
},
isLoggedIn: state => {
return state.isLoggedIn
},
user: state => {
return state.user
}
}
and the user is fetched in a computed property as such:
user() {
return this.$store.getters.user;
},