React + Supabase项目无法读取环境变量，提示supabaseKey必填

直接在代码中硬编码Supabase URL和密钥时应用正常，但改用环境变量后出现报错：

SupabaseClient.ts:87 Uncaught Error: supabaseKey is required.

按以下步骤排查解决：

• 确认文件位置：.env或.env.local必须放在项目根目录（和package.json同级），不能放在src子文件夹内。
• 重启开发服务：修改环境变量后必须重启React开发服务器，否则新变量不会被加载。
• 移除变量值的引号：环境变量定义时不要给值加双引号，正确写法：

  REACT_APP_SUPABASE_URL=myurl
  REACT_APP_SUPABASE_KEY=mykey
  

  带引号会导致读取到的变量包含引号，被Supabase判定为无效密钥。
• 修复代码语法错误：你的Database.js存在语法问题，import语句未闭合，正确代码：

  import { createClient } from '@supabase/supabase-js';
  
  const supabaseUrl = process.env.REACT_APP_SUPABASE_URL;
  const supabaseKey = process.env.REACT_APP_SUPABASE_KEY;
  
  export const supabase = createClient(supabaseUrl, supabaseKey);
  

• 验证变量注入情况：在组件中添加打印语句，确认环境变量是否被正确读取：

  console.log('Supabase Key:', process.env.REACT_APP_SUPABASE_KEY);
  

  若输出undefined，说明变量未加载；若输出带引号的字符串，就是引号问题导致的。

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