Expo集成Clerk Auth遇window.addEventListener未定义错误求助

错误根源 #

你遇到的问题是Clerk的Web端依赖代码被意外引入导致的——Expo（React Native）环境里没有浏览器的window对象，但Clerk的Web版组件/内部逻辑会调用window.addEventListener，哪怕你自己没写这段代码，也会触发报错。

修复步骤 #

1. 确认安装Expo专属Clerk包 #

先检查你装的是不是@clerk/clerk-expo，如果之前误装了Web版的@clerk/react或@clerk/clerk-js，先卸载再重新安装适配包：

# 卸载错误的Web版包
npm uninstall @clerk/react @clerk/clerk-js
# 安装Expo适配包
npm install @clerk/clerk-expo

2. 修正全局Provider配置 #

打开app/_layout.tsx，确保导入的是Expo版的ClerkProvider，别用Web版的：

// 正确导入
import { ClerkProvider } from '@clerk/clerk-expo';
// 错误导入（直接删掉）
// import { ClerkProvider } from '@clerk/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}>
      {children}
    </ClerkProvider>
  );
}

3. 替换Web版Clerk组件为Expo导航逻辑 #

如果你的页面里用了Clerk提供的Web端链接组件（比如SignInLink、SignUpLink），这些组件依赖浏览器DOM，直接换掉，改用Expo Router的导航配合Clerk的Expo方法：
比如app/(home)/index.tsx里可以这么写：

import { useRouter } from 'expo-router';
import { useAuth } from '@clerk/clerk-expo';
import { View, Button } from 'react-native';

export default function HomeScreen() {
  const router = useRouter();
  const { isSignedIn, signOut } = useAuth();

  return (
    <View>
      {!isSignedIn ? (
        <Button title="去登录" onPress={() => router.push('/(auth)/sign-in')} />
      ) : (
        <Button title="退出登录" onPress={signOut} />
      )}
    </View>
  );
}

4. 修正Auth布局的保护逻辑 #

打开app/(auth)/_layout.tsx，用Expo版的SignedIn/SignedOut组件，别用Web版的保护组件：

import { SignedOut, SignedIn } from '@clerk/clerk-expo';
import { Redirect } from 'expo-router';

export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <SignedIn>
        {/* 已登录就重定向到首页 */}
        <Redirect href="/(home)" />
      </SignedIn>
      <SignedOut>
        {children}
      </SignedOut>
    </>
  );
}

5. 清除缓存重启项目 #

缓存可能残留旧的Web版代码，执行命令彻底清理后重启：

npx expo start --clear

额外排查 #

如果还是报错，看错误栈里触发报错的文件路径——如果指向@clerk/clerk-js或@clerk/react，说明项目里还有Web版包的依赖，检查package.json里的依赖项，彻底删除后重新安装@clerk/clerk-expo。

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