使用Supabase CDN时createClient/SupabaseClient未定义错误求助

核心问题 #

你使用的是Supabase JS v2版本的CDN，但未正确引用其全局导出对象。v2版本通过CDN加载后，全局暴露的对象是Supabase，而非直接提供createClient或SupabaseClient变量。

修复步骤 #

1. 修正客户端创建代码 #

将JS中的createClient调用改为从全局Supabase对象中获取：

const SupabaseKey = "你的API密钥";
const SupabaseUrl = "你的Supabase项目URL";

const options = {
  db: {
    schema: 'public',
  },
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: true
  }
}

// 从全局Supabase对象调用createClient方法
const supabase = Supabase.createClient(SupabaseUrl, SupabaseKey, options);

2. 确认CDN加载顺序 #

你的HTML中CDN脚本已在main.js之前加载，这个顺序是正确的。若仍有问题，可以指定具体的v2版本号避免自动更新带来的兼容问题：

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.45.4"></script>

3. 旧方法失效说明 #

Supabase JS v2已废弃SupabaseClient.createClient写法，统一使用Supabase.createClient创建客户端，因此之前尝试旧方法出现SupabaseClient is not defined属于正常情况。

验证方式 #

修改代码后，在浏览器控制台执行console.log(supabase)，若能输出Supabase客户端实例，说明问题已解决。

内容的提问来源于stack exchange，提问作者Khaled-The-Dev