[Bug]: Firebase App Check import/initialization according to documentation causes runtime errors

[whats-a-handle]

Operating System

MacOS Ventura 13.2.1

Browser Version

ChromeVersion 113.0.5672.92 (Official Build) (x86_64)

Firebase SDK Version

9.21

Firebase SDK Product:

Analytics, AppCheck, Auth, Firestore, Functions

Describe your project's tooling

ReactJS with Create React App

Describe the problem

I have been using firebase js v9.15 for a while now, and decided to update to v9.21 to leverage the new App Check functionality that was added for the new Firebase IAM Authentication (beta). Ive been using AppCheck to secure my Firestore, and I have not had any issues with that functionality so I know I have a valid AppCheck config for the last few months.

Upon updating to 9.21, I began to receive Uncaught Runtime errors in my local environment stating that Component app-check has not been registered yet. I had not changed the way I initialized and imported initializeAppCheck and ReCaptchaV3Provider as I had been following the official documentation for months https://firebase.google.com/docs/app-check/web/recaptcha-provider#initialize.

Runtime error

firebase.js is where I initialize firebase, auth, and appcheck

Official Firebase js provider.ts file

Steps and code to reproduce issue

Follow the Firebase documentation to initialize AppCheck for Web v9 and use firebase js v9.21.
https://firebase.google.com/docs/app-check/web/recaptcha-provider#initialize

import { initializeApp } from 'firebase/app';

const { initializeAppCheck, ReCaptchaV3Provider } = require('firebase/app-check'); //this causes the error
const app = initializeApp(<Your firebase config>);

window.self.FIREBASE_APPCHECK_DEBUG_TOKEN = <Your Debug Token>

const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider(<App Check Key>),
  isTokenAutoRefreshEnabled: true,
});

You should receive an uncaught error stating that Component app-check has not been registered yet

Solution or Workaround

Import initializeAppCheck and ReCaptchaV3Provider like so, and it works as expected. Not sure if the official documentation needs to be updated or what. I repro'd this issue in a clean repo outside of my main project where I discovered this issue as well.

import {initializeAppCheck,ReCaptchaV3Provider} from 'firebase/app-check'

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[jbalidiong]

Hi @whats-a-handle, thanks for bringing this to our attention. I was able to replicate the behavior you've mentioned. Let me check what we can do for this issue and see if there should be any documentation update needed. I'll provide an update or bring someone here that can provide more context about it.

[dwyfrequency]

@whats-a-handle the issue here is that there were two different types of imports esm and cjs in your file.

The snippet in the app check docs for initialization uses require which will bring in the cjs bundle.

// snippet from docs works correctly
 const { initializeApp } = require("firebase/app");
 const { initializeAppCheck, ReCaptchaV3Provider } = require("firebase/app-check");

However in your example, you used both import and require.

// using both esm and cjs imports breaks because two bundles are imported
import { initializeApp } from 'firebase/app';
const { initializeAppCheck, ReCaptchaV3Provider } = require('firebase/app-check'); 

I'm working on firebase/snippets-web#340 which will update the snippets in the docs to the esm imports i.e. import .. from .., but using the exact code from the docs snippets for cjs will work as well.

[dwyfrequency]

let me know if this does not work for you, in the meantime i will close the issue

[thatfiredev]

@whats-a-handle Thanks for finding and reporting this. We have fixed it in the docs: https://firebase.google.com/docs/app-check/web/recaptcha-provider#initialize :)