_index.default is undefined - Expo app from Supabase tutorial throws an error on the web

[SheepTD]

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

After strictly following the Build a User Management App with Expo React Native tutorial in the supabase docs and running the web version of the app I was faced with the following error message:

Uncaught TypeError: _index.default is undefined in Firefox
Uncaught TypeError: Cannot destructure property 'PostgrestClient' of '_index.default' as it is undefined. in Chrome

This happened only with the web version. When I ran the app in Expo Go on Android it worked perfectly.
I tried to debug the code and narrowed it down to single import statement

import { createClient } from "@supabase/supabase-js";

Only when this import statement is commented out does the error go away.

To Reproduce

1. Follow the supabase tutorial here
2. Install web dependencies: npx expo install react-dom react-native-web @expo/metro-runtime
3. Run npm start in the console and open the localhost url in your browser.
4. Open the console and view error.

If you want the app to load without the error, continue with the following:

5. comment out the createClient import statement and the export statement in supabase.js. Replace the export statement something other than createClient. Your supabase.js should then look something like this:

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";

6. comment out the useEffect statement in App.tsx:

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>
  );
}

7. View loaded Account page without the error

Expected behavior

Load the web page fully without the Uncaught TypeError: _index.default is undefined error message.

System information

• OS: Windows 11
• Browser Firefox and Chrome
• Version of @supabase/supabase-js: 2.44.2
• Version of Node.js: 20.14.0
• Version of Expo: 51.0.17

Additional context

I have only found one other mention of this error from a discord user two days ago here
I have created a stack overflow question here

[alaister]

TL;DR workaround until we get this fixed: Pin supabase-js to 2.43.5 (ie "@supabase/supabase-js": "2.43.5" in your package.json).

From a little bit of digging it seems this was introduced in supabase/postgrest-js#540 on this line.

Interestingly if you change import index from '../cjs/index.js' to import * as index from '../cjs/index.js', it works as expected.

cc @soedirgo I'm not too familiar with our ESM setup, would you mind taking a look and seeing if that is a viable fix? 🙏🏻

[SheepTD]

Thank you for finding this work around, you've saved me a lot of time and frustration.
I'm afraid I don't know much at all about this or how to test the change your proposing, sorry.
Good luck anyhow and thanks again.

[itsjohnward]

I noticed the same. Raised a PR here: supabase/postgrest-js#548