Firebase app 중복 초기화 문제

"Firebase: Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app)." 오류가 발생했다.

useEffect 내에서 이 코드를 이용해 firebase를 초기화하고 있었다.

    const app = initializeApp(firebaseConfig);

검색해 보니 다음과 같이 우회할 수 있었다.

[Firebase] Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app).

위 글을 참고해 다음과 같이 코드를 수정했다.

    const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

그러나 해결되지 않았다...

혹시나 해서 파일을 분리해 보았다.

import { getApp, getApps, initializeApp } from 'firebase/app';
import { firebaseConfig } from './firebaseConfig';

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

export default app;

/* 생략 ... */
import app from './firebaseApp';

const useGetAuthState = () => {
/* 중략 ... */

  useEffect(() => {
    const auth = getAuth(app);

/* 중략 ... */

  }, [navigator]);

  return uid;
};

export default useGetAuthState;

코드에 큰 차이가 없기 때문에 사실상 오류 해결에 도움을 주지는 않았다.

다만, 이렇게 바꾸고 나서 navigate hook으로 하던 페이지 이동을 window.location.href로 바꿔 버렸다. 그래서 페이지를 강제 이동시킴으로써 문제를 우회할 수 있었는데,  이 부분은 추후 다시 확인할 예정이다.