$fireMess undefined in production mode

Version

@nuxtjs/firebase: ^5.0.7 firebase: ^7.14.2 nuxt: 2.11.0

Reproduction Link

https://firebase.nuxtjs.org/guide/usage/#general-usage

Steps to reproduce

1. Setup Nuxt JS project and install Firebase and the Firebase Module, set to universal mode.
2. Setup config of module with the following services object:

services: {
  messaging: true
}

1. The following code is added for token refresh:

var messaging = this.$fireMess;

messaging.onTokenRefresh(() => {
  ...
});

What is Expected?

this.$fireMess should be defined in production Nuxt JS.

What is actually happening?

this.$fireMess is undefined in production mode of Nuxt JS.

[lupas]

nuxt start doesn’t technically reproduce that of a traditional web server

You’re right, but it runs nuxt in production mode, which is what you named as the issue, so I used it to quickly check if it’s just that.

but try building and then run npm run generate or nuxt generate afterwards.

If you read my message you see that after that I did nuxt generate and deployed the static html, and did not run into the issue. So a productive generate deployment works, too.

So that way I could assume it’s something related to your setup.

In any case, the information that you run into troubles running it with MAMP Pro is valuable. So I installed MMAP Pro, set up a host, ran it, and: Got same issue as you. Finally =)

Now MAMP Pro doesn’t run any SSL just like that, which is needed for Firebase Messaging to work.

So I did:

1. Host -> SSL
2. Create self-signed certificate…
3. Add something random

Restarted the server and it worked.

Let me know if that does anything for you.

[lupas]

@sts-ryan-holton

So I just did the following:

  mounted() {
    console.log("FIRE MESSAGING", this.$fireMess)
  },

• nuxt build and then
• nuxt start

And it wasn’t undefined in production mode:

So to see if a generated & deployed Nuxt generate behaves the same way, I deployed a static site to Firebase:

yarn run generate && firebase deploy --only hosting --project nuxt-fire-demo

https://nuxt-fire-demo.web.app/ Also works…

So there must be something off with your config, or your environment (e.g. your browser) where you test it. Know that messaging is not supported on all browsers, so it doesn’t get initialized if the browser doens’t support it.

Though I assume you tested it on the same browser in dev and prod so that’s probably not it either…

Btw here is the branch of the demo on which I tested it out, maybe the code there helps you to find the issue.