Missing App configuration value apiKey projectId appId for firebase-messaging-sw.js template

[wandriputra]

Hello,

I use this only for firebase-messaging / handling notifications in my application.

but I found the provider.ts problem: 109 Uncaught FirebaseError: Installations: Missing App configuration value: "projectId" (installations / missing-app-config-values).

which makes it unable to register the default service worker like this screenshot below

i u

the solution I found was to add apiKey projectId appId to the firebase-messaging-sw.js templates like the line of code below.

const version = options.firebaseVersion
const apiKey = options.apiKey // i add this line
const projectId = options.projectId // i add this line
const appId = options.appId // i add this line
const messagingSenderId = options.messagingSenderId
const onFirebaseHosting = options.onFirebaseHosting

if (onFirebaseHosting) {
  // Only works on Firebase hosting!
  importScripts('/__/firebase/' + version + '/firebase-app.js')
  importScripts('/__/firebase/' + version + '/firebase-messaging.js')
  importScripts('/__/firebase/init.js')
}
else {
  importScripts(
    'https://www.gstatic.com/firebasejs/' + version + '/firebase-app.js'
  )
  importScripts(
    'https://www.gstatic.com/firebasejs/' + version + '/firebase-messaging.js'
  )
  firebase.initializeApp({
    apiKey, // i add this line
    projectId, // i add this line
    appId, // i add this line
    messagingSenderId: messagingSenderId
  })
} 

does this lead to an issue or am I miss configuration?

[lupas]

Hi @wandriputra

This sounds to me like you did not set up your nuxt-fire config in nuxt.config.js properly.
Do you have the three values defined there like in the example below?

 //Nuxt-Fire Module Options
    fire: {
      config: {
        apiKey: 'foo', // <-- !!!!! DEFINE THIS
        authDomain: 'foo',
        databaseURL: 'foo',
        projectId: 'foo', // <-- !!!!! DEFINE THIS
        storageBucket: 'foo',
        messagingSenderId: 'foo',
        appId: 'foo', // <-- !!!!! DEFINE THIS
        measurementId: 'foo',
        fcmPublicVapidKey: 'foo'
      },
      services: {
        messaging: {
          createServiceWorker: true,
          onFirebaseHosting: false
        }
      }
    },

[wandriputra]

Hi @lupas

I have followed the steps as in the documentation. but it's still not working. i must modify firebase-messaging-sw.js each running server

modules: [
    '@nuxtjs/vuetify',
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    ['@nuxtjs/moment', { locales: ['id'], defaultLocale: 'id' }],
    [
      'nuxt-fire',
      {
        config: {
          production: {
            apiKey: '',
            authDomain: '',
            databaseURL: '',
            projectId: '',
            storageBucket: '',
            messagingSenderId: '',
            appId: '',
            measurementId: '<measurementId>'
          },
          development: {
            apiKey: '',
            authDomain: '',
            databaseURL: '',
            projectId: '',
            storageBucket: '',
            messagingSenderId: '',
            appId: '',
            measurementId: '<measurementId>'
          }
        },
        services: {
          auth: true,
          firestore: false,
          functions: false,
          storage: false,
          realtimeDb: false,
          messaging: {
            createServiceWorker: true,
            onFirebaseHosting: false
          },
          performance: false,
          analytics: true,
          remoteConfig: false
        }
      }
    ]
    // '@nuxtjs/auth'
  ],

[zhuharev]

hi @lupas i had same issue

need to add props to here https://github.com/lupas/nuxt-fire/blob/master/packages/nuxt-fire/src/index.js#L24-L27 and change template

[lupas]

Hi @zhuharev and @wandriputra

Thanks for reporting the issue. Has been fixed with v3.5.5