Nuxt3集成Supabase遇Multiple GoTrueClient实例警告及功能异常求助

问题根源 #

• 依赖中同时存在nuxt和nuxt3两个版本，触发框架初始化冲突
• 手动安装了@supabase/gotrue-js、@supabase/postgrest-js，但@supabase/supabase-js已内置这些子包，重复安装会生成多个GoTrueClient实例
• 未使用Nuxt官方Supabase集成模块，手动调用客户端易引发实例管理混乱

修复步骤 #

1. 清理冗余依赖 #

修改package.json，移除冲突和重复依赖，保留必要项：

"dependencies": {
  "@nuxtjs/google-fonts": "^3.0.2",
  "@supabase/supabase-js": "^2.31.0",
  "axios": "^1.4.0",
  "nuxt": "^3.6.5",
  "nuxt-icons": "^3.2.1",
  "uuid": "^9.0.0"
}

删除的冗余项：

• nuxt3：与nuxt版本冲突，保留稳定版nuxt即可
• @supabase/gotrue-js、@supabase/postgrest-js：@supabase/supabase-js已包含这些依赖，无需单独安装

2. 安装Nuxt官方Supabase模块 #

执行命令安装官方集成模块：

npm install @nuxtjs/supabase

3. 配置Nuxt模块 #

在nuxt.config.ts中添加Supabase模块配置：

export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase'],
  supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_ANON_KEY,
    options: {
      auth: {
        persistSession: true
      }
    }
  },
  // 其他原有配置...
})

确保项目根目录的.env文件中已配置SUPABASE_URL和SUPABASE_ANON_KEY。

4. 重新安装依赖并测试 #

删除旧依赖缓存后重新安装：

rm -rf node_modules package-lock.json
npm install

启动项目后，在组件中正常使用内置方法即可，无需手动创建客户端实例：

<script setup>
const user = useSupabaseUser()
const supabase = useSupabaseClient()

// 示例：查询用户数据
const fetchUserProfile = async () => {
  if (user.value) {
    const { data, error } = await supabase
      .from('profiles')
      .select('*')
      .eq('id', user.value.id)
    
    if (error) console.error(error)
    else console.log(data)
  }
}
</script>

验证效果 #

完成上述步骤后，多GoTrueClient实例的警告会消失，认证状态（localStorage会话）和数据库操作恢复正常，useSupabaseUser()与useSupabaseClient()可同时正常工作。

内容的提问来源于stack exchange，提问作者Nick Schnee