Can't use with unstable_enablePackageExports metro option (expo)

[aldebout]

Cross-posting https://github.com/supabase/realtime-js/issues/415 because I'm not sure you're monitoring the issues on the other repo :)

Bug report

• [x] I confirm this is a bug with Supabase, not with my own application.
• [x] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

When using @supabase/supabase-js in an expo react native project, if I use the unstable_enablePackageExports with the metro bundler, bundling fails with the following error:

To Reproduce

1. Generate a new expo app
2. Add @supabase/supabase-js as a dependency
3. Create a supabase client in the main _layout.tsx file
4. Run npx expo customize metro.config.js
5. Add config.resolver.unstable_enablePackageExports = true; to metro.config.js
6. Add ios.bundleIdentifier to app.json
7. Run npx expo run:ios

Repro repo: https://github.com/aldebout/supabase-expo-exports-issue

Expected behavior

No crash

Screenshots

System information

• OS: macOS
• Version of supabase-js: 2.45.1
• Version of Node.js: 20.16.0

Additional information

Opening here because the error message I got in my actual project was

The package at "../../node_modules/@supabase/realtime-js/node_modules/ws/lib/stream.js" attempted to import the Node standard library module "stream".
It failed because the native React runtime does not include the Node standard library.

[practiv-wamci]

Is there any update on this? I've run into the same issue

[adamwett]

I've also run into this when trying to use Storybook and Expo.

[marcocondrache]

I'm able to run it by manually specifying nodeModulesPaths and setting disableHierarchicalLookup to true (in a monorepo setup).

[DanielVolchek]

I'm able to run it by manually specifying nodeModulesPaths and setting disableHierarchicalLookup to true (in a monorepo setup).

This solution didn't work for me

I was able to fix it by patching @supabase/realtime-js to match supabase/realtime-js#426

patchfile looks like this

diff --git a/dist/module/RealtimeClient.js b/dist/module/RealtimeClient.js
index a8bb0121343481d789acb0248ecbb20c7e4597fe..a299d5b3370b836bdf28307deb7a157c6ccf0bc5 100644
--- a/dist/module/RealtimeClient.js
+++ b/dist/module/RealtimeClient.js
@@ -143,12 +143,6 @@ export default class RealtimeClient {
                 this.conn = null;
             },
         });
-        import('ws').then(({ default: WS }) => {
-            this.conn = new WS(this._endPointURL(), undefined, {
-                headers: this.headers,
-            });
-            this.setupConnection();
-        });
     }
     /**
      * Disconnects the socket.

named patches/@supabase__realtime-js.patch

I then added the following to my package.json (for pnpm)

  "pnpm": {
    "patchedDependencies": {
      "@supabase/realtime-js": "patches/@supabase__realtime-js.patch"
    },
    "overrides": {
      "@supabase/realtime-js>ws": "-" 
    }
  }