React Native+Expo v49集成Supabase后Web端报window未定义错误求助

问题根源 #

Expo Router在Web端默认会进行服务端渲染（SSR）或预渲染，此时window对象还未在全局环境初始化，但Supabase JS客户端的部分内部逻辑直接依赖window，导致组件初始化阶段（甚至useEffect触发前的渲染周期）抛出错误。

解决方案 #

1. 延迟Supabase客户端初始化到浏览器环境

修改Supabase客户端初始化代码，确保仅在window存在时创建实例：

// supabase-client.js
import { createClient } from '@supabase/supabase-js';

let supabase;

if (typeof window !== 'undefined') {
  supabase = createClient(
    process.env.EXPO_PUBLIC_SUPABASE_URL,
    process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY
  );
}

export default supabase;

2. 强化useEffect的客户端执行判断

在useEffect中额外增加环境检查，避免SSR阶段执行Supabase调用：

import supabase from '../path/to/supabase-client';
import { useState, useEffect } from 'react';

function YourComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      const fetchData = async () => {
        const { data: fetchedData, error } = await supabase
          .from('your_table')
          .select('*');
        
        if (!error) setData(fetchedData);
      };

      fetchData();
    }
  }, []);

  // 组件渲染逻辑
  return (
    <div>{data ? JSON.stringify(data) : 'Loading...'}</div>
  );
}

3. 禁用Expo Router的SSR（可选）

若上述方法无效，可在路由配置中禁用SSR，确保组件完全在客户端渲染：

• 全局禁用（在app/_layout.js中）：

export const unstable_settings = {
  unstable_enableSSR: false,
};

• 单个页面禁用（在目标页面文件中）：

// app/your-target-page.js
export const unstable_settings = {
  unstable_enableSSR: false,
};

验证步骤 #

1. 重启Expo开发服务器：npx expo start --web
2. 清空浏览器缓存后重新加载页面
3. 检查控制台是否仍存在window is not defined错误

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