supabase / supabase-js

An isomorphic Javascript client for Supabase. Query your Supabase database, subscribe to realtime events, upload and download files, browse typescript examples, invoke postgres functions via rpc, invoke supabase edge functions, query pgvector.
https://supabase.com
MIT License
3.15k stars 251 forks source link

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

Closed SheepTD closed 2 months ago

SheepTD commented 2 months ago

Bug report

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:

  1. 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 (

{session && session.user ? ( ) : ( )}

); }



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](https://discord.com/channels/839993398554656828/1257159939798073385)
I have created a stack overflow question [here](https://stackoverflow.com/questions/78699744/index-default-is-undefined-expo-app-from-supabase-tutorial-throws-error-on-we)
alaister commented 2 months ago

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 https://github.com/supabase/postgrest-js/pull/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 commented 2 months ago

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 commented 2 months ago

I noticed the same. Raised a PR here: https://github.com/supabase/postgrest-js/pull/548