Search code examples
firebasegoogle-cloud-functionsnuxt.jsvuex

Nuxt plugin not available in Vuex's 'this' in Firebase production (ERROR: this.$myPlugin is not a function)


I'm trying to upload my nuxt app to Firebase as cloud function. The problem is that in the nuxtServerInit action I'm trying to call a plugin function, which apparently is not yet defined at that moment, because an error is thrown: (ERROR: this.$myPlugin is not a function). The code works in dev mode, it's just after upload to Firebase it fails.

The setup is as follows:

myPlugin.js

let env, auth, app, $store;
export default (context, inject) => {
    env = context.app.context.env;
    auth = context.app.$fire.auth;
    app = context.app;
    $store = context.store;
    inject('myPlugin', myPlugin);
};
async function myPlugin(...) {... }

nuxt.config.js

plugins: [
    { src: '~/plugins/myPlugin', mode: 'all' }, // with no mode specified it fails too
],

vuex index.js

export const actions = {
    async nuxtServerInit({ dispatch, commit }, { req }) { 
        const tl = await dispatch("initAction");
        return tl;
    }
}

vuex someModule.js

const actions = {
    initAction({ commit }) {
        return this.$myPlugin(...).then(...) // this line throws '$myPlugin is not a function' error
    }
}

What can be the reason for the different behaviour in dev and in prod modes and how could I fix the problem?

UPDATE: After further testing I established that the problem is not caused by the nuxtServerInit timing. I moved the call of the initAction from nuxtServerInit to a page's created hook. However the same error appears: this.$query is not a function.


Solution

  • The problem occured, because js files were not getting fully loaded due to CORB errors caused by incorrect configuration. Details described in this question.