supabase - ERROR: Multiple GoTrueClient instances detected in the same browser context 에러

const supabase = () =>
  createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL as string,
    process.env.NEXT_PUBLIC_SERVICE_KEY as string
  );

export default supabase;

• 위와 같이 supabase 를 export 하여 다른 컴포넌트에서 사용하려는데 콘솔에 경고문구가 출력됨

• 문구를 해석해보자면 '에러는 아니지만 client instance가 여러 개가 감지되었고, 이는 가급적 지양해야 할 행동이다' 쯤으로 해석됨

• 쉽게 맗해 supabase 인스턴스가 현재 내 프로젝트 앱 내에 여러개가 존재하기에 발생하는 경고문인 것

const client = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL as string,
  process.env.NEXT_PUBLIC_SERVICE_KEY as string
);

const supabase = () => client;

export default supabase;

• 생성한 client 인스턴스를 client 라는 변수에 담고, supabase를 외부 컴포넌트에서 호출하여 사용할 때마다, 이미 만들어져 담겨있는 변수 client를 return 하도록 해서 인스턴스 중복 가능성을 제거하니 경고문구 사라짐