Firebase Authentication を使用してGoogleアカウントでログインをできるようにしたい

前提

Firebase ウェブ Codelabの公式ドキュメントに沿いながらFriendly Chatというウェブアプリケーションを作成しています。その中で、Firebase Authentication を使用してユーザーを認証しようとしております。
しかし、現状ログインボタンを押しても何も反応せずログインできない状態になっております。

実現したいこと

Firebase Authentication を使用してgoogle accountでログインできるようにする。

発生している問題・エラーメッセージ

Uncaught FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options). at initializeApp (index.esm2017.js?8a30:423:1) at getApp (index.esm2017.js?8a30:476:1) at getAuth (index-0bb4da3b.js?d0d7:9497:30) at initFirebaseAuth (index.js?b635:66:29) at eval (index.js?b635:348:1) at ./src/index.js (main.js:159:1) at __webpack_require__ (main.js:263:41) at main.js:304:37 at main.js:306:12

該当のソースコード

firebase

/** * To find your Firebase config object: * * 1. Go to your [Project settings in the Firebase console](https://console.firebase.google.com/project/_/settings/general/) * 2. In the "Your apps" card, select the nickname of the app for which you need a config object. * 3. Select Config from the Firebase SDK snippet pane. * 4. Copy the config object snippet, then add it here. */ const config = { apiKey: "", authDomain: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "" }; export function getFirebaseConfig() { if (!config || !config.apiKey) { throw new Error('No Firebase configuration object provided.' + '\n' + 'Add your web app\'s configuration object to firebase-config.js'); } else { return config; } }

'use strict'; import { initializeApp } from 'firebase/app'; import { getAuth, onAuthStateChanged, GoogleAuthProvider, signInWithPopup, signOut, } from 'firebase/auth'; import { getFirestore, collection, addDoc, query, orderBy, limit, onSnapshot, setDoc, updateDoc, doc, serverTimestamp, } from 'firebase/firestore'; import { getStorage, ref, uploadBytesResumable, getDownloadURL, } from 'firebase/storage'; import { getMessaging, getToken, onMessage } from 'firebase/messaging'; import { getPerformance } from 'firebase/performance'; import { getFirebaseConfig } from './firebase-config.js'; // Signs-in Friendly Chat. async function signIn() { // Sign in Firebase using popup auth and Google as the identity provider. var provider = new GoogleAuthProvider(); await signInWithPopup(getAuth(), provider); } // Signs-out of Friendly Chat. function signOutUser() { // Sign out of Firebase. signOut(getAuth()); } // Initialize firebase auth function initFirebaseAuth() { // Listen to auth state changes. onAuthStateChanged(getAuth(), authStateObserver); } // Returns the signed-in user's profile Pic URL. function getProfilePicUrl() { return getAuth().currentUser.photoURL || '/images/profile_placeholder.png'; } // Returns the signed-in user's display name. function getUserName() { return getAuth().currentUser.displayName; } // Returns true if a user is signed-in. function isUserSignedIn() { return !!getAuth().currentUser; } initFirebaseAuth(); loadMessages(); const firebaseAppConfig = getFirebaseConfig(); initializeApp(firebaseAppConfig);

上記のファイルはindex.jsとなります。
自分が変更した部分以外は省略させていただきました。

試したこと

上記のファイルに
import { initializeApp } from "firebase/app";を追加してみたりしましたが、
エラー内容が増えるのみでした。

補足情報（FW/ツールのバージョンなど）

Mac(M1)
firebase --version 11.16.1
[サンプルコード](git clone https://github.com/firebase/codelab-friendlychat-web)はこちらから
見ることができます。