How to lazy load Firebase with dynamic imports

App.js

import getFirebase from "./firebase.js";

function MyApp() {
  // Example function that wraps some firebase logic
  const onSignup = async (email, password) => {
    // Use await to ensure firebase library is loaded
    const firebase = await getFirebase();
    // Call firebase methods as you normally would
    const { user } = await firebase.auth()
      .createUserWithEmailAndPassword(email, password);
    // Do something with `user`
    router.push(`/user/${user.uid}`);
  }
  
  return (
    <Signup onSubmit={onSignup} />
  );
}

firebase.js

const getFirebase = async () => {
  // Lazy load Firebase core (must come first)
  const { default: firebase } = await import("firebase/app");
  // Lazy load Firebase services you need
  await Promise.all([
    import("firebase/firestore"), 
    import("firebase/auth"),
  ]);

  // Make sure not already initialized
  if (!firebase.apps.length) {
    firebase.initializeApp(config);
  }

  return firebase;
};

export default getFirebase;

That did the trick, thanks!