纯JavaScript环境下能否使用Supabase？报错问题求助

问题背景 #

需搭建仅依赖index.html、style.css、script.js和server.php的Supabase项目，禁止安装额外库。引入Supabase CDN后控制台报错：Uncaught ReferenceError: createClient is not defined，使用VSCode Live Server测试页面。

报错原因 #

Supabase JS SDK v2通过CDN引入后，createClient方法并非全局暴露，而是挂载在Supabase命名空间下，直接调用会导致未定义错误。此外原代码中supabase变量为局部变量，其他异步函数无法访问该实例。

修复方案 #

1. 修正Supabase初始化逻辑
   将createClient改为Supabase.createClient，同时把supabase变量提升至全局作用域，确保所有函数都能访问该实例：

   // 全局声明supabase变量
   let supabase;
   
   document.addEventListener('DOMContentLoaded', () => {
       const supabaseUrl = '你的Supabase项目URL';
       const supabaseKey = '你的Supabase anon公钥';
       // 正确调用命名空间下的createClient
       supabase = Supabase.createClient(supabaseUrl, supabaseKey);
       loadSupabaseImages();
   });
   

2. 验证函数调用有效性
   原代码中loadSupabaseImages、addImageToSupabase等函数已正确使用supabase变量，只要全局变量存在即可正常运行。

3. 必要配置检查

   • 确保Supabase控制台已创建名为images的存储桶，并开启公共读取权限（否则前端无法加载图片）
   • 数据库需创建images表，包含url字段用于存储图片访问链接
   • 使用的supabaseKey必须是项目的anon公钥，禁止使用服务端密钥

修正后的核心script.js片段 #

let supabase;

async function loadSupabaseImages() {
    const { data, error } = await supabase
        .from('images')
        .select('url');
    if (error) {
        console.error('加载Supabase图片失败:', error.message);
        return;
    }

    const container = document.getElementById('supabase-images');
    container.innerHTML = '';
    if (data && data.length > 0) {
        data.forEach(image => {
            const img = document.createElement('img');
            img.src = image.url;
            container.appendChild(img);
        });
    }
}

// 其余函数保持不变

document.addEventListener('DOMContentLoaded', () => {
    const supabaseUrl = 'myurl';
    const supabaseKey = 'mykey';
    supabase = Supabase.createClient(supabaseUrl, supabaseKey);
    loadSupabaseImages();
});

内容的提问来源于stack exchange，提问作者ghustaff Strudiewic