React集成Supabase报错：supabaseUrl is required 求助

在React应用中集成Supabase获取数据时，始终触发错误：Uncaught Error: supabaseUrl is required.

以下是我的配置、代码及已尝试的操作，恳请提供解决方案：

我的配置与代码 #

.env.local 文件内容 #

REACT_APP_SUPABASE_URL=https://eyd.....
REACT_APP_SUPABASE_ANON_KEY=eyJIUzI1Ni.....

supabase.js 文件内容 #

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL;
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY;

export default createClient(supabaseUrl, supabaseAnonKey);

数据获取组件代码 #

import React from "react";
import { useEffect } from "react";
import supabase from "../supabase";

export default function BlogPosts() {
    async function fetchData() {
        let { data: bposts, error } = await supabase.from("bposts").select("*");
        console.log(bposts);
    }

    useEffect(() => {
        fetchData();
    }, []);
  
  return <pre>{JSON.stringify(bposts, null, 2)}</pre>;
}

完整错误信息 #

SupabaseClient.ts:87 
       
       Uncaught Error: supabaseUrl is required.
    at new SupabaseClient (SupabaseClient.ts:87:1)
    at createClient (index.ts:38:1)
    at ./src/supabase.js (supabase.js:6:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/components/Blog/BlogCard.js (Blog.js:28:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)

已尝试的操作 #

• ✅ 重启开发服务
• ✅ 重新核对REACT_APP_SUPABASE_URL和REACT_APP_SUPABASE_ANON_KEY的API值
• ✅ 确认.env文件中REACT_APP_SUPABASE_URL的正确性

可能的解决方案 #

1. 检查环境文件位置与命名

   • 确保.env.local放在项目根目录（与package.json同级），而非src文件夹下。
   • 确认变量名严格以REACT_APP_开头，无大小写错误、空格或拼写失误。

2. 验证环境变量加载状态
   在supabase.js中添加日志，确认变量是否成功获取：

   import { createClient } from "@supabase/supabase-js";
   
   const supabaseUrl = process.env.REACT_APP_SUPABASE_URL;
   const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY;
   
   console.log("Supabase URL:", supabaseUrl);
   console.log("Supabase Anon Key:", supabaseAnonKey);
   
   if (!supabaseUrl || !supabaseAnonKey) {
     throw new Error("Supabase URL或Anon Key未加载！");
   }
   
   export default createClient(supabaseUrl, supabaseAnonKey);
   

   启动服务后查看控制台，若输出undefined，说明环境变量未被读取，可尝试重启IDE或检查.gitignore是否误屏蔽了.env.local（本地加载不受Git忽略影响）。

3. 清理环境变量多余引号
   确保.env.local中变量值无多余引号，正确写法：

   REACT_APP_SUPABASE_URL=https://your-project.supabase.co
   

   错误写法（引号会被当作值的一部分）：

   REACT_APP_SUPABASE_URL="https://your-project.supabase.co"
   

4. 排查React项目配置

   • 若使用Create React App，确保版本≥4.0.0，旧版本对.env.local支持存在差异。
   • 若为自定义Webpack配置，需确保已安装并配置dotenv-webpack插件加载环境变量。

5. 临时硬编码测试（仅用于排查）
   临时将URL和Key硬编码到supabase.js中，验证Supabase连接是否正常：

   export default createClient("https://your-project.supabase.co", "your-anon-key");
   

   若此方式能正常运行，可确定问题出在环境变量加载环节，回到前面步骤排查。

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