CODEWITHSUNDEEP
react-nativeexposupabaseexpo-go
SheepTD
SheepTD

Reputation: 21

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

Edit

This bug has now been patched!

Description

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";
  1. 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>
  );
}
  1. 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

Additional context

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

I have started a github issue here

Upvotes: 0

Views: 371

Answers (1)

SheepTD
SheepTD

Reputation: 21

The issue is due to a bug in supabase. Until it is fixed you can do a work around by installing and using an older version of @supabase/supabase-js. Run the following in the terminal to install the working version:

npm install @supabase/[email protected]

Check your package.json references this version. It should look something like this:

"@supabase/supabase-js": "^2.43.5",

Thank you to alaister for finding this work around. See the original message here

Upvotes: 2

Related Questions