Supabase集成报错：Cannot read properties of undefined (reading 'SUPABASE_URL')

可能的原因及解决方法 #

1. 前端框架的环境变量前缀要求 #

大部分前端框架（如Create React App、Vite）对可注入浏览器环境的环境变量有前缀限制：

• Create React App：变量必须以REACT_APP_开头
• Vite：变量必须以VITE_开头

修正步骤：

• 修改.env文件内容：

  # Create React App 示例
  REACT_APP_SUPABASE_URL=https://xxxx
  REACT_APP_SUPABASE_KEY=xxxxxxxxx
  
  # Vite 示例
  VITE_SUPABASE_URL=https://xxxx
  VITE_SUPABASE_KEY=xxxxxxxxx
  

• 同步更新supabaseClient.js中的变量引用：

  // Create React App 版本
  import { createClient } from '@supabase/supabase-js'
  
  const supabaseUrl = process.env.REACT_APP_SUPABASE_URL
  const supabaseKey = process.env.REACT_APP_SUPABASE_KEY
  const supabase = createClient(supabaseUrl, supabaseKey)
  
  export default supabase
  

  // Vite 版本
  import { createClient } from '@supabase/supabase-js'
  
  const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
  const supabaseKey = import.meta.env.VITE_SUPABASE_KEY
  const supabase = createClient(supabaseUrl, supabaseKey)
  
  export default supabase
  

2. 确认dotenv的加载时机（Node.js环境） #

如果是Node.js后端项目，需要在代码最顶部手动加载dotenv：

// 放在supabaseClient.js的最开头
import 'dotenv/config' // ES模块语法
// 或 CommonJS 语法：require('dotenv').config()

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.SUPABASE_URL
const supabaseKey = process.env.SUPABASE_KEY
const supabase = createClient(supabaseUrl, supabaseKey)

export default supabase

注意：前端框架通常已内置dotenv处理逻辑，无需手动引入，否则可能引发冲突。

3. 检查.env文件的位置与命名 #

• 确保.env文件位于项目根目录（与package.json同级），不要放在子文件夹内
• 文件名必须为.env（开发环境可使用.env.development，生产环境用.env.production），避免拼写错误（如.env.local或.env.dev需框架支持才会自动加载）

4. 重启开发服务器 #

修改环境变量后，必须重启开发服务器才能让新的环境变量生效，这是容易忽略的关键操作。

5. 避免在浏览器环境直接使用process.env #

浏览器本身不存在process对象，前端框架是通过打包工具将环境变量注入到代码中的。如果是非框架的纯前端项目，需使用Webpack等打包工具配置环境变量注入，或直接将变量硬编码（不推荐生产环境）。

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