[lazy-mode] this.$fireModule returns null IF this.$fire...Ready() is called in the same component

[ismail-fathi]

Version

@nuxtjs/firebase:
firebase:
nuxt:

Steps to reproduce

setup firebase as you normally do in nuxtjs
then call await this.$fire.firestoreReady()
then console.log(this.$fireModule)

What is actually happening?

the output is undifined

[lupas]

Hey @ismail-fathi

Hard to debug without you sharing your code. Did you install Firebase? Could you share your package.json?

[ismail-fathi]

Hey @lupas

I have installed firebase and @nuxtjs/firebase

"firebase": "^8.0.0"
"@nuxtjs/firebase": "^7.0.0"

And that is my nuxtjs/firebase config

'@nuxtjs/firebase',
      {
        config: {
          apiKey: "XXXX",
          authDomain: "XXXX",
          databaseURL: "XXXX",
          projectId: "XXXX",
          storageBucket: "XXXX",
          messagingSenderId: "XXXX",
          appId: "XXXX",
          measurementId: "XXXX"
        },
        lazy: true,
        services: {
          auth: true,
          firestore: true,
          functions: true,
          storage: true
        },

In my page I have a method where I want to use firestore but when I try to usethis.$fireModule) it returns undefined

submit() {
        await this.$fire.firestoreReady()
        console(this.$fireModule)
      }

I hope you now get a better understanding of what is wrong and thank you for your help!

[lupas]

@ismail-fathi

$fireModule gets injected after the first ready() function is finished. Can you try making your submit function async so that it awaits firestoreReady() before it continues?

Like so:

async submit() {
        await this.$fire.firestoreReady()
        console(this.$fireModule)
      }

[ismail-fathi]

@lupas

my function is indeed async but still..

but still returns undefined

[lupas]

Hmmmm, interesting. I just tested it and the same works for me perfectly:

Did you add the module to modules resp. buildModules?

modules: ['@nuxtjs/firebase'],

[ismail-fathi]

yep it's in modules indeed

shoud ['@nuxtjs/firebase'] be in buildModules?

[lupas]

Can be in buildModules in this case, but this should not make a difference...

Hm... you can log out console.log(this.$fire) and it works?

[ismail-fathi]

Yep it works
here is the result

[lupas]

My bad, I was already loading another Firebase service in a plugin (context.$fire.authRead()), that's why it worked for me. If the very first ready() function is called directly in a vue component, it indeed seems not to be accessible. (though the inject() function get's triggered...)

@pimlie
Do you maybe know how injections works under the hood? If I call somethingReady() in a plugin, I can later use this.$fireModule in the context because it gets injected "early enough". But if I use it directly in a vue component, the inject function gets triggered - but $fireModule is still undefined.

Any idea?

[abhishekbatra]

Just upgraded and facing this issue. Should lazy just be disabled for now as a workaround?

[pimlie]

@lupas Sorry for late reply, injecting like this doesnt work reliably indeed. Sorry about that, we/Rafal found this out when I added lazy initialization for the nuxt sentry/module where I used the same injection scheme.

For the sentry module we added this custom inject helper: https://github.com/nuxt-community/sentry-module/blob/master/lib/plugin.lazy.js#L186 which is called here: https://github.com/nuxt-community/sentry-module/blob/master/lib/plugin.lazy.js#L164. The problem is is that Nuxt uses a defineProperty to add the injection without a setter, so once you've injected something you cannot overwrite it anymore. See here for Nuxt's inject implementation: https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/index.js#L181-L216

[1hakr]

Apart from that issue, I also noticed that with lazy: true, onAuthStateChangedAction is not getting triggered.

[lupas]

Thanks @pimlie, will have a look at if we could solve this similarly in this module.
Until this is fixed I guess I will just mention in the docs that we have this limitation in lazy mode.

@1hakr About onAuthStateChangedAction not working in lazy mode: This is clear - if we do not initialize auth from the beginning, we of course also cannot call onAuthStateChanged, since auth is not initialized. So if someone wants to use onAuthStateChanged, lazy mode does not make sense. OR one can already load the auth module in a plugin before onAuthStateChange is called, that would of course work.

I thought we documented this somewhere but it seems we missed it... thanks for the input!

ToDo notes for myself or anyone who has time:

• Add missing info for onAuthStateChangedAction to documentation
• Try to fix this issue

[lupas]

Hey @ismail-fathi & Co.

Finally got to fixing this issue with the solution from @pimlie (which was plain simple) - so thanks you too, I appreciate it.

Should now be working in v7.3.1

[uppergoal]

Hey! I'm facing the problem where I'm enabling lazy and I'm trying to await app.$fire.authReady() inside a plugin. I'm receiving the following error:

TypeError: Cannot read property '$options' of undefined
    at forceInject (index.js?d90b:170)

[lupas]

Thanks a lot @uppergoal , fixed that with v7.3.2

[uppergoal]

Thanks a lot @uppergoal , fixed that with v7.3.2

The problem is still happening for me with v7.3.2 (Since version v7.3.0). Version 7.2.3 worked fine so I'll downgrade to that version.

[lupas]

Thanks a lot @uppergoal , fixed that with v7.3.2

The problem is still happening for me with v7.3.2 (Since version v7.3.0). Version 7.2.3 worked fine so I'll downgrade to that version.

Hmm... will have a look at it tomorrow, I'm quite sure I had it working with the fix. Same error message?

[uppergoal]

Thanks a lot @uppergoal , fixed that with v7.3.2

The problem is still happening for me with v7.3.2 (Since version v7.3.0). Version 7.2.3 worked fine so I'll downgrade to that version.

Hmm... will have a look at it tomorrow, I'm quite sure I had it working with the fix. Same error message?

Yeah sadly. I wish I could propose a fix to help you.

This is the error I have:

In my plugin: await app.$fire.authReady() is creating the error.

**my nuxt.config: **
ssr: false,
target: 'static'

firebase: {
lazy: true
},
auth: {
        initialize: {
          onAuthStateChangedAction: 'auth/onAuthStateChanged',
          subscribeManually: true,
        },
        ...
        }

Version 7.2.3. is working perfectly fine.

[lupas]

@uppergoal
Alright, NOW it should be fixed in v7.3.3. :) Thanks for the tip, appreciate it.

[uppergoal]

@uppergoal
Alright, NOW it should be fixed in v7.3.3. :) Thanks for the tip, appreciate it.

Awesome! I just tested it and it works. Thanks @lupas for your work. Greatly appreciated.