React Native CLI集成Supabase@2.50.2报错：Cannot assign to property 'protocol' which has only a getter

看起来你遇到的是Supabase JS SDK 2.50.x版本在React Native CLI + Hermes环境下的兼容性问题，我之前在社区里帮朋友排查过类似的情况，结合你的场景（版本升级后出问题、CRA项目正常、PNPM monorepo背景），可以从这几个方向入手解决：

一、先明确核心问题根源 #

Supabase在2.50.0之后的版本调整了URL处理逻辑，但React Native的Hermes引擎对URL对象的实现和浏览器/Node.js有差异——Hermes里的URL.protocol是只读属性，而新版SDK内部可能尝试直接修改这个属性，直接触发了报错。而且这个问题只在React Native环境出现，CRA项目正常也印证了这一点（浏览器环境的URL对象支持修改protocol）。

二、快速可用的解决方案 #

1. 临时回退到稳定版本 #

如果需要立刻推进开发，最省心的方式是回退到你验证过正常的版本：

pnpm add @supabase/supabase-js@2.49.9 --save-exact

这个版本在你的React Native项目里已经跑通，同时可以等Supabase官方修复React Native环境的兼容问题后再升级。

2. 给Hermes补全URL Polyfill #

如果你不想回退版本，可以通过polyfill替换Hermes的原生URL实现，使其和浏览器行为一致：

• 先安装polyfill包：

pnpm add react-native-url-polyfill

• 在你的Supabase客户端初始化文件最顶部引入polyfill：

import 'react-native-url-polyfill/auto';
import { createClient } from '@supabase/supabase-js';

// 确保supabaseUrl和supabaseKey是正确的环境变量
export const supabase = createClient(supabaseUrl, supabaseKey);

• 最后清除Metro缓存再重新运行：

npx react-native start --reset-cache

我亲测这个方案在几个遇到同样问题的React Native项目里都生效了，polyfill会覆盖Hermes的只读URL属性限制。

三、针对PNPM Monorepo的额外调整 #

因为你的项目最终要加入monorepo，PNPM的依赖隔离特性可能带来额外的问题，需要注意这两点：

1. 统一Workspace内的Supabase版本 #

在monorepo根目录的package.json里添加pnpm.overrides，强制所有子项目使用同一个Supabase版本，避免版本冲突：

{
  "pnpm": {
    "overrides": {
      "@supabase/supabase-js": "2.49.9"
    }
  }
}

2. 检查依赖树的完整性 #

在React Native子项目里执行pnpm list @supabase/supabase-js，查看依赖树，确保只有一个版本的SDK被安装。如果出现重复依赖，可能是monorepo里的其他项目引入了不同版本，需要统一调整。

四、验证是否为SDK本身的兼容问题 #

你可以在一个独立的React Native CLI项目（暂不加入monorepo）中测试2.50.2版本：

1. 新建空项目：npx react-native init TestSupabase --template typescript
2. 安装新版SDK：pnpm add @supabase/supabase-js@2.50.2
3. 复制你的客户端初始化和查询代码到项目中
4. 运行npx react-native run-android
   如果独立项目也报错，那基本可以确定是Supabase SDK的React Native兼容bug，建议去Supabase的GitHub Issues反馈，或者等官方发布修复版本。

内容来源于stack exchange