Firebase getToken – Cannot destructure property 'appConfig'

February 7, 2022

I have the following trivial messaging app

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AI...Y",
  authDomain: "xyz.firebaseapp.com",
  databaseURL: "https://xyz.firebaseio.com",
  projectId: "xyz",
  storageBucket: "xyz.appspot.com",
  messagingSenderId: "441...38",
  appId: "1:....f",
  measurementId: "G-...",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

const vapidKey = "BLFWI5-...opE";

console.log("have app");
const messaging = getMessaging(app);

console.log("have messaging", messaging);
getToken({ vapidKey })
  .then((res) => console.log("token", res))
  .catch((err) => console.error(err));

haveApp and haveMessaging seem to log correctly, but I am ending up in getToken.catch with

TypeError: Cannot destructure property 'appConfig' of 'undefined' as it is undefined.
    at getKey2 (idb-manager.ts:104:19)
    at dbGet (idb-manager.ts:50:15)
    at getTokenInternal (token-manager.ts:52:30)

I actually have a far more complex app that works with a similar setup, but I wanted to go back to basics to check I understood a few fundamental things. Any idea.

I’ve tried with VSCode’s built in server using CDN imports, and now with vite using local imports. The error is always the same message, albeit with different stacktraces

>Solution :

Using v9? You need to pass the Messaging instance as the first arg…

getToken(messaging, { vapidKey })

See https://firebase.google.com/docs/reference/js/messaging_.md#gettoken

Signature:

export declare function getToken(messaging: Messaging, options?: GetTokenOptions): Promise<string>;

This is one of the major changes between versions 8 and 9. All of the functions you import from the various libraries require a FirebaseApp or other instance to be passed in.