React App won’t render after importing auth from firebase

Vite, React, and Tailwind.
When I ran my project on the browser with auth from firebase imported, my app wouldn’t load. Now, what I realized is that when I put the import auth from 'firebase/auth' at the end of the code the app will still load. So, I assume that the import takes more time and the solution is something correlated with asynchronous importing. Alas, I still haven’t founded the right code to fix it.

Here’s my code:

firebase.jsx

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
import { getAuth } from "firebase/auth";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "####",
  authDomain: "####.firebaseapp.com",
  projectId: "###",
  storageBucket: "###",
  messagingSenderId: "####",
  appId: "####",
  measurementId: "####"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const auth = getAuth();

SignUp.jsx

This is where I want to put the sign up functioning. So, when line one is inputted, the app would crash. However, when it is put on the last line of code, it won’t. I wouldn’t be able to write the code properly if the import was in the last line.

import auth from '../firebase/firebase'
export default function SignUp(){
    return (
        <div className="rounded-xl w-2/5 flex-1 absolute h-2/4 bg-dark items-center left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4 ">
            <form action="">
                <h2 className="text-white text-3xl flex-1 font-mono font-bold text-center">Sign Up</h2>
                <input type="text" /> 
            </form>
        </div>
    )
}

I tried asynchronous importing using this syntax that I found on stackexchange but it didn’t work.

(async () => {

  const { getAuth } = await import('firebase/auth');

})();

I also tried to put the import { getAuth } from "firebase/auth"; on the SignUp file and continue everything from there but still didn’t work.