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.