TypeError: Cannot read property 'getToken' of undefined in Firebase App Check - Help needed

Question

I have updated Firebase to the latest v9 and as per the docs I am using compat in my import statements.

When I deploy my app to Vercel, deployment is a success. However I have also added app-check based on this answer from Firebaser @Frank van Puffelen https://stackoverflow.com/a/51393449/2772415, in response to a previous question. Now however when I try to deploy my app, deployment fails with the following error... TypeError: Cannot read property 'getToken' of undefined at AppCheckService.activate (/vercel/path0/node_modules/@firebase/app-check-compat/dist/index.cjs.js:70:82)

I have installed App-check as per the documentation, I have set up google reCAPTCHA v3 also as per the docs, so I'm not sure what I'm doing wrong.

Has anyone encountered similar errors with App-checker? I am using Firebase real time database for some context.

Any help is greatly appreciated.

import firebase from 'firebase/compat/app';

import 'firebase/compat/database'
import 'firebase/compat/app-check'

const config = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);

  const appCheck = firebase.appCheck();
  // Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
  // key is the counterpart to the secret key you set in the Firebase console.
  appCheck.activate(
    process.env.GOOGLE_APP_CHECK_SITE_KEY,

    // Optional argument. If true, the SDK automatically refreshes App Check
    // tokens as needed.
    true);
}

const database = firebase.database();

export { firebase, database as default };