firebase working but firebase.auth() not working in Vue.js

Question

I ran

npm i firebase

and have

import firebase from 'firebase/compat/app'

but when i run

console.log(firebase.auth())

I get an error message of

app.js:280 Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).
    at app (firebaseNamespaceCore.ts?1484:102:1)
    at Object.serviceNamespace [as auth] (firebaseNamespaceCore.ts?1484:152:1)
    at eval (HelloWorld.vue?e90b:24:1)
    at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:30:1)
    at __webpack_require__ (app.js:277:33)
    at fn (app.js:517:21)
    at eval (HelloWorld.vue?vue&type=script&lang=js:5:213)
    at Module../src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:140:1)
    at __webpack_require__ (app.js:277:33)
    at fn (app.js:517:21)

However, when I just run console.log(firebase) I get correct data output in console. I have also setup firebase correctly as documented here but firebause.auth() is still not working. I am working in Vue3 but I don't think that part matters, still trying to find a solution.

I am currently trying to get firebaseUI to work and this is the step I am getting stuck in. Once I'm able to get firebause.auth() to work, I'll be able to initialize the firebaseUI widget by running:

var ui = new firebaseui.auth.AuthUI(firebase.auth());

my ./src/firebaseConfig.js code:

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "code",
  authDomain: "code",
  projectId: "code",
  storageBucket: "code",
  messagingSenderId: "code",
  appId: "code",
  measurementId: "code"
};

const firebaseApp = initializeApp(firebaseConfig);
export default firebaseApp

My component file using firebaseConfig.js in ./src/components/HellowWorld.vue :

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div id="sign-in-status"></div>
    <div id="sign-in"></div>
    <pre id="account-details"></pre>
  </div>
</template>

<script>
import firebaseConfig from '../firebaseConfig';

import firebase from 'firebase/compat/app';
import * as firebaseui from 'firebaseui'
import 'firebaseui/dist/firebaseui.css'

console.log(firebaseConfig);
console.log(firebase);

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui




export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

both

console.log(firebaseConfig);
console.log(firebase);

works but

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui

produces an error as copy and pasted above.