Supabase•3y ago

undefined is not an object (evaluating 'globalThis.localStorage.getItem')] in react-native

Getting this error. I'm assuming this is something to do with localStorage. relavant stackoverflow issue https://stackoverflow.com/questions/68763589/undefined-is-not-an-objectevaluating-this-localstorage-getitem-error-in-reac can someone help me with this? I tried to clean localStorage too. didn't work.

Stack Overflow

undefined is not an object(evaluating 'this.localStorage.getItem') ...

I tried to implement supabase with react-native expo app. Then got this error when trying to call a GET API call to get all data from 'Players' table but got an error in localstorage. How to fix th...

13 Replies

garyaustin•3y ago

https://supabase.com/docs/guides/with-expo#initialize-a-react-native-app I think you need a localStorage polyfill for react-native, but I don't use it.

Quickstart: Expo | Supabase

Learn how to use Supabase in your React Native App.

0verreadOP•3y ago

Yes, I did. here is my code -

import AsyncStorage from "@react-native-async-storage/async-storage";
import { createClient } from "@supabase/supabase-js";
import { setupURLPolyfill } from 'react-native-url-polyfill';

setupURLPolyfill()
import {REACT_NATIVE_SUPABASE_URL, REACT_NATIVE_SUPABASE_ANON_KEY} from "@env";


const supabaseUrl = REACT_NATIVE_SUPABASE_URL
const supabaseAnonKey = REACT_NATIVE_SUPABASE_ANON_KEY

const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  localStorage: AsyncStorage,
  persistSession: true,
  detectSessionInUrl: false,
});


export default supabase;

import AsyncStorage from "@react-native-async-storage/async-storage";
import { createClient } from "@supabase/supabase-js";
import { setupURLPolyfill } from 'react-native-url-polyfill';

setupURLPolyfill()
import {REACT_NATIVE_SUPABASE_URL, REACT_NATIVE_SUPABASE_ANON_KEY} from "@env";


const supabaseUrl = REACT_NATIVE_SUPABASE_URL
const supabaseAnonKey = REACT_NATIVE_SUPABASE_ANON_KEY

const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  localStorage: AsyncStorage,
  persistSession: true,
  detectSessionInUrl: false,
});


export default supabase;

but it is still throwing me same error. I'm assuming supabase is not giving me data. @Team can anyone help me with this? Why supabase returning this error?

garyaustin•3y ago

It is extremely bad form to flag all employees especially on a user to user forum.

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  localStorage: AsyncStorage as any,
  autoRefreshToken: true,
  persistSession: true,
  detectSessionInUrl: false,
});

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  localStorage: AsyncStorage as any,
  autoRefreshToken: true,
  persistSession: true,
  detectSessionInUrl: false,
});

The v1 guide showed as any with AsyncStorage. Don't know if that is your issue or not. Also the code you have assumes you are using v1. v2 is now in the linked guide and has a slightly different set up.

0verreadOP•3y ago

I'm sorry for that. won't happen again. I promise.

garyaustin•3y ago

Also have you looked at any of these: from a google search on "undefined is not an object globalThis.localStorage.getItem supabase" https://github.com/supabase/gotrue-js/issues/431 https://stackoverflow.com/questions/73601394/error-typeerror-undefined-is-not-an-object-evaluating-globalthis-localstorag I'm sort of surprised on the 2nd one as I would not expect the message at that point in a call....

GitHub

supabase-js 2.0rc8: React native support · Issue #431 · supabase/go...

React native support for supabase-js v2 After installing supabase-js 2.0rc8, I get a bunch of errors in my react native (expo managed) project. Describe the bug Immediately after installing supabas...

Stack Overflow

ERROR [TypeError: undefined is not an object (evaluating 'globalThi...

I am trying to just select everything from a table from supabase. When I perform my fetch function, this is thrown and I dont know why.I have my URL and Key set into my supbase.js file. picture of ...

garyaustin•3y ago

Are you v1 or v2/rc?

0verreadOP•3y ago

import AsyncStorage from "@react-native-async-storage/async-storage";
import { createClient } from "@supabase/supabase-js";
import { setupURLPolyfill } from 'react-native-url-polyfill';

setupURLPolyfill()
import {REACT_NATIVE_SUPABASE_URL, REACT_NATIVE_SUPABASE_ANON_KEY} from "@env";


const supabaseUrl = REACT_NATIVE_SUPABASE_URL
const supabaseAnonKey = REACT_NATIVE_SUPABASE_ANON_KEY

const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    localStorage: AsyncStorage,
    persistSession: true,
    detectSessionInUrl: false,
    autoRefreshToken: true
  }
});

export default supabase;

import AsyncStorage from "@react-native-async-storage/async-storage";
import { createClient } from "@supabase/supabase-js";
import { setupURLPolyfill } from 'react-native-url-polyfill';

setupURLPolyfill()
import {REACT_NATIVE_SUPABASE_URL, REACT_NATIVE_SUPABASE_ANON_KEY} from "@env";


const supabaseUrl = REACT_NATIVE_SUPABASE_URL
const supabaseAnonKey = REACT_NATIVE_SUPABASE_ANON_KEY

const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    localStorage: AsyncStorage,
    persistSession: true,
    detectSessionInUrl: false,
    autoRefreshToken: true
  }
});

export default supabase;

This is my current code. Still facing same issue. Don't know why. Yes, I looked into those solutions but didn;t work I'm on v2 "@supabase/supabase-js": "^2.0.0-rc.10", as any works in typescript. I'm suing JS. correct me if im wrong

garyaustin•3y ago

I believe that is correct... I don't use typescript or react-native though. The only thing I notice different is your polyfill stuff is in a different place than the guide. But since I don't really know what is going on not sure that matters. Does the error occur during the createClient call?

0verreadOP•3y ago

No.. It's fine.. It's giving me error when I'm trying to fetch all data from my table.

const getAllTasks = async () => {
    let { data: tasks, error } = await supabase.from('tasks').select('*')
    if (error){ console.log(error)}
    console.log("tasks", tasks);
    return tasks
  }
  useEffect(() => {
    getAllTasks().then((tasks ) => {
      console.log('tasks',tasks)
    })
  }, []);

const getAllTasks = async () => {
    let { data: tasks, error } = await supabase.from('tasks').select('*')
    if (error){ console.log(error)}
    console.log("tasks", tasks);
    return tasks
  }
  useEffect(() => {
    getAllTasks().then((tasks ) => {
      console.log('tasks',tasks)
    })
  }, []);

garyaustin•3y ago

Ahh... localStorage versus storage as the key?

0verreadOP•3y ago

yeah, I tried that too. didn't work.. lemme try it again 😃 WTF.. it worked... It didn't work before.. Thanks a lot and sorry for that

garyaustin•3y ago

You may have not had auth before when you tried it?

0verreadOP•3y ago

yeah yeah, It might be. because I added this auth part recently.

Gaming

Programming

undefined is not an object (evaluating 'globalThis.localStorage.getItem')] in react-native

Did you find this page helpful?