Closed ismail-fathi closed 3 years ago
Hey @ismail-fathi
Hard to debug without you sharing your code. Did you install Firebase? Could you share your package.json?
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!
@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)
}
@lupas
my function is indeed async but still..
but still returns undefined
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'],
yep it's in modules indeed
shoud ['@nuxtjs/firebase'] be in buildModules?
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?
Yep it works here is the result
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?
Just upgraded and facing this issue. Should lazy just be disabled for now as a workaround?
@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
Apart from that issue, I also noticed that with lazy: true
, onAuthStateChangedAction
is not getting triggered.
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:
onAuthStateChangedAction
to documentationHey @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
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)
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.
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?
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.
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