使用Supabase实现OTP登录遇代码错误，寻求帮助

我按照Supabase官方文档实现Next.js的SessionContextProvider，代码和文档示例完全一致，但运行时报错。

官方文档提供的代码：

import { createPagesBrowserClient } from '@supabase/auth-helpers-nextjs'
import { SessionContextProvider } from '@supabase/auth-helpers-react'
import { useState } from 'react'

function MyApp({ Component, pageProps }) {
  // Create a new supabase browser client on every first render.
  const [supabaseClient] = useState(() => createPagesBrowserClient())

  return (
    <SessionContextProvider
      supabaseClient={supabaseClient}
      initialSession={pageProps.initialSession}
    >
      <Component {...pageProps} />
    </SessionContextProvider>
  )
}

我的代码与上述示例完全一致，但仍出现错误，尝试过多种搜索到的解决方案均无效，求帮助。

排查与解决步骤 #

• 统一依赖版本
  确保@supabase/auth-helpers-nextjs、@supabase/auth-helpers-react和@supabase/supabase-js版本兼容，不同版本可能存在API差异。执行命令安装最新兼容版本：

  npm install @supabase/auth-helpers-nextjs@latest @supabase/auth-helpers-react@latest @supabase/supabase-js@latest
  

• 校验环境变量配置
  检查.env.local文件是否正确配置Supabase核心变量：

  NEXT_PUBLIC_SUPABASE_URL=你的Supabase项目URL
  NEXT_PUBLIC_SUPABASE_ANON_KEY=你的Supabase匿名密钥
  

  配置完成后重启开发服务器，确保变量生效。

• 适配Next.js路由模式
  如果使用Next.js 13+ App Router，Pages Router的代码逻辑不适用，需改用App Router专属实现：

  // app/providers.jsx
  'use client'
  
  import { createBrowserClient } from '@supabase/auth-helpers-nextjs'
  import { SessionContextProvider } from '@supabase/auth-helpers-react'
  import { useState } from 'react'
  
  export default function SupabaseProvider({ children, initialSession }) {
    const [supabaseClient] = useState(() => createBrowserClient())
  
    return (
      <SessionContextProvider
        supabaseClient={supabaseClient}
        initialSession={initialSession}
      >
        {children}
      </SessionContextProvider>
    )
  }
  

  然后在根布局文件中引入：

  // app/layout.jsx
  import SupabaseProvider from './providers'
  
  export default function RootLayout({ children }) {
    return (
      <html lang="zh-CN">
        <body>
          <SupabaseProvider>{children}</SupabaseProvider>
        </body>
      </html>
    )
  }
  

• 清除缓存重建项目
  删除缓存文件与依赖目录后重新安装构建：

  rm -rf .next node_modules
  npm install
  npm run dev
  

• 确认文件路径正确性
  若使用Pages Router，代码必须放在pages/_app.js或pages/_app.tsx文件中；若使用App Router，需对应放在app目录下的指定文件中，路径错误会导致API无法正常加载。

内容的提问来源于stack exchange，提问作者Victor Timi