Expo结合Supabase开发时window.location.href未定义报错如何解决

• React Native/Expo 运行环境不存在浏览器专属的 window 全局对象，标准版本的 @supabase/supabase-js 部分逻辑默认适配浏览器环境，会尝试读取 window.location.href 处理OAuth回调等场景，在RN环境运行就会触发该类型错误。
• 额外排查场景：如果是最近更新了supabase-js版本后才出现报错，也可能是新版本默认配置取消了对RN环境的兼容判断，或者你的环境变量 SUPABASE_APIURL/SUPABASE_KEY 未正确加载，导致初始化逻辑走了异常分支触发了浏览器侧代码。

1. 安装RN环境专属存储依赖 #

Supabase在RN环境下需要用异步存储替代浏览器的localStorage，执行对应命令安装：

# Expo环境优先用这个命令
npx expo install @react-native-async-storage/async-storage

# 普通RN环境或者用npm的话执行
npm install @react-native-async-storage/async-storage

2. 修改Supabase初始化配置 #

调整你的database.js代码，新增RN适配配置，核心是关闭URL会话检测逻辑，避免读取window对象：

import { createClient } from '@supabase/supabase-js'
import AsyncStorage from '@react-native-async-storage/async-storage'

const supabaseUrl = process.env.SUPABASE_APIURL
const supabaseKey = process.env.SUPABASE_KEY

export default supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    storage: AsyncStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false, // 核心配置：关闭URL会话检测，不会再读取window.location.href
  },
})

3. 环境变量校验（可选） #

如果修改后仍报错，先打印supabaseUrl和supabaseKey确认两个值不为undefined，如果为空需要检查Expo环境变量配置：比如是否在app.json/app.config.js的extra字段中声明了对应变量，或者react-native-dotenv的babel插件配置是否正确。

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