在同一浏览器上下文中检测到多个 GoTrueClient 实例

Question

我正在使用 nextjs 和 supabase 创建一个项目。

由于未知原因，我在控制台中收到以下警告：

在同一浏览器上下文中检测到多个 GoTrueClient 实例。这不是错误，但应该避免这种情况，因为在同一存储键下并发使用时可能会产生未定义的行为。

我似乎找不到可能导致此问题的原因

这是我在 _app.tsx 中启动 supabase 实例的方式：

export default function App({
  Component,
  pageProps,
}: AppProps<{ initialSession: Session }>) {
  const [supabaseClient] = useState(() => createBrowserSupabaseClient());

  return (
    <>
      <style jsx global>
        {`
          :root {
            --font-inter: ${inter.style.fontFamily};
          }
        `}
      </style>
      <SessionContextProvider
        supabaseClient={supabaseClient}
        initialSession={pageProps.initialSession}
      >
        <ChakraProvider theme={theme}>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </ChakraProvider>
      </SessionContextProvider>
    </>
  );
}

这就是我在组件中使用实例的方式：

const ForgotPassword = () => {
  const toast = useToast();
  const supabase = useSupabaseClient();
...
}

您是否遇到过类似的问题并可以帮助我了解我做错了什么？

Answer 1

我收到此错误的原因是因为我必须将版本auth-helpers-nextjs从 0.7.x 降级到 0.6.x 以支持注册时无需电子邮件确认，

版本 0.7.x 自动返回单例对象createPagesBrowserClient

在 0.6.x 版本中，createBrowserSupabaseClient始终返回新对象而不是单例，

在react 18中启用reactStrictMode，页面将渲染两次，导致多个GoTrueClients的错误。

我如何解决这个问题是通过使用 Supabase Client 的单例实例创建一个新对象：

import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";

const SupabaseClient = {
  instance: createBrowserSupabaseClient(),
};

export type SupabaseClientType = typeof SupabaseClient;

Object.freeze(SupabaseClient);

export { SupabaseClient };

然后在 _app.tsx 中使用它：

const [supabaseClient] = useState(() => SupabaseClient.instance);

现在警告应该消失了。