Expo + Supabase教程Web端出现_index.default未定义错误（已修复）

更新说明 #

该问题现已修复！

问题描述 #

严格遵循Supabase官方文档中的《使用Expo React Native构建用户管理应用》教程开发后，运行Web版本时出现如下错误：

• Firefox中提示：Uncaught TypeError: _index.default is undefined
• Chrome中提示：Uncaught TypeError: Cannot destructure property 'PostgrestClient' of '_index.default' as it is undefined.

该问题仅出现在Web端，Android的Expo Go中运行完全正常。经调试定位到错误源于import { createClient } from "@supabase/supabase-js";语句，注释该语句后错误消失。

复现步骤 #

• 按照Supabase官方的《使用Expo React Native构建用户管理应用》教程操作；
• 安装Web依赖：npx expo install react-dom react-native-web @expo/metro-runtime；
• 执行npm start并在浏览器打开localhost地址；
• 打开控制台查看错误。

临时解决方法 #

1. 在supabase.js中注释createClient导入语句及相关导出代码，替换为其他导出内容，示例如下：

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

const supabaseUrl = "...";
const supabaseAnonKey = "...";

// export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
//   auth: {
//     storage: AsyncStorage,
//     autoRefreshToken: true,
//     persistSession: true,
//     detectSessionInUrl: false,
//   },
// });

export const supabase = "hello world";

2. 在App.tsx中注释useEffect语句，示例如下：

export default function App() {
  const [session, setSession] = useState<Session | null>(null);
  // useEffect(() => {
  //   supabase.auth.getSession().then(({ data: { session } }) => {
  //     setSession(session);
  //   });
  //   supabase.auth.onAuthStateChange((_event, session) => {
  //     setSession(session);
  //   });
  // }, []);
  return (
    <View>
      {session && session.user ? (
        <Account key={session.user.id} session={session} />
      ) : (
        <Auth />
      )}
    </View>
  );
}

3. 即可正常加载Account页面。

预期行为 #

Web页面可完整加载，无Uncaught TypeError: _index.default is undefined错误提示。

系统信息 #

• OS：Windows 11
• 浏览器：Firefox、Chrome
• @supabase/supabase-js版本：2.44.2
• Node.js版本：20.14.0
• Expo版本：51.0.17

补充说明 #

仅在Discord中发现一位用户两天前提及此问题，已在GitHub提交issue。

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