AppCheck firebase reCaptcha setup issue

Question

I am using this firebase with next.js.

I am trying to add AppCheck reCaptcha to config, I follow the documentation and some recommendations, but when I run yarn build

Build fails with next error:

ReferenceError: document is not defined
    at makeDiv (file:///home/runner/work/physician_me_client/physician_me_client/node_modules/firebase/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1093:26)
    at initializeV3 (file:///home/runner/work/physician_me_client/physician_me_client/node_modules/firebase/node_modules/@firebase/app-check/dist/esm/index.esm2017.js:1038:19)
    at ReCaptchaV3Provider.initialize 

This is my firebase config file:

/* eslint no-undef: 0 */
import {
  initializeAppCheck,
  ReCaptchaV3Provider,
  getToken,
} from 'firebase/app-check';


if (firebaseConfig?.projectId) {
  const app = initializeApp(firebaseConfig);

  auth = getAuth(app);
  firestore = getFirestore(app);
  firebase = app;

  storage = getStorage();
  googleProvider = new GoogleAuthProvider();

  if (app.name && typeof window !== 'undefined') {
    analytics = getAnalytics(app);
  }

  // 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.
  if (IS_PRODUCTION && RECAPTCHA_SITE_KEY) {
    const appCheck = initializeAppCheck(app, {
      provider: new ReCaptchaV3Provider(RECAPTCHA_SITE_KEY as string),
      isTokenAutoRefreshEnabled: true,
    });

    getToken(appCheck)
      .then(() => {
        console.log('success');
      })
      .catch(error => {
        console.log(error.message);
      });
  }
}

Answer 1

I got the same error. This check helped me:

if (typeof document !== "undefined") {
    const appCheck = initializeAppCheck(app, {
    ...
  });
}