Can't use with unstable_enablePackageExports metro option (expo)

[aldebout]

Cross-posting #1726 because I'm not sure you're monitoring the issues on the other repo :)

Bug report

• I confirm this is a bug with Supabase, not with my own application.
• 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": "-" 
    }
  }

[filipecabaco]

I've merged supabase/realtime-js#444 so 2.11.4-next.1 will have this code.

I do need some help testing this change, if possible do override realtime-js in supabase-js with this version

[DanielVolchek]

Unfortunately doesn't seem to be working

Can also confirm that the package is overriden correctly

[filipecabaco]

so this is happening during the bundling process of Expo, is there a way to configure which package to remove from the bundling process in some sort of configuration?

[DanielVolchek]

Not sure about expo but with pnpm I can do this and it works

  "pnpm": {
    "overrides": {
      "@supabase/realtime-js": "2.11.4-next.1",
      "@supabase/realtime-js>ws": "-"
    }
  }

[filipecabaco]

I need to double check why we need the ws library 🤔

[gianpaj]

Same issue here.

 ERROR  [Error: undefined Unable to resolve module stream from /Users/gianpaj/tmp/call-me-please/node_modules/ws/lib/stream.js: stream could not be found within the project or in these directories:
  ../../node_modules
  ../../../node_modules
  node_modules
  ../../node_modules
  1 | 'use strict';
  2 |
> 3 | const { Duplex } = require('stream');
    |                             ^
  4 |
  5 | /**
  6 |  * Emits the `'close'` event on a stream.]
The package at "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.

the code is open sourced here: https://github.com/gianpaj/call-me-please

If you uncomment the supabase import and the Signup <Button/> in the settings.tsx file, you'll see the same error message

$ pnpm list --depth 1 | grep supabase
@supabase/supabase-js 2.47.10
├── @supabase/auth-js 2.67.3
├── @supabase/functions-js 2.4.4
├── @supabase/node-fetch 2.6.15
├── @supabase/postgrest-js 1.17.7
├── @supabase/realtime-js 2.11.2
└── @supabase/storage-js 2.7.1

$ pnpm list --depth 0 | grep expo
@expo/metro-config 0.19.8
expo 52.0.23

Overwriting to 2.11.4-next.1 of @supabase/realtime-js didn't work either :(

This is the metro.config.js file for Turborepo mono repo setup
https://github.com/gianpaj/call-me-please/blob/master/apps/expo/metro.config.js

[aimachinedream]

Any update? I can't get past this issue as other parts of my project need unstable_enablePackageExports: true.

[xStrixU]

@filipecabaco any updates?