not working react native web

[adsalihac]

What happened?

Getting Error

Version

1.23.1

What platforms are you seeing this issue on?

• Android
• iOS
• macOS
• Windows
• web

System Information

Error storing data ReferenceError: window is not defined
    at getValue (/node_modules/@react-native-async-storage/async-storage/lib/commonjs/AsyncStorage.js:69:52)

Steps to Reproduce

• install async storage in expo 51
• run web

[t1gu1]

Got the exact same issue.
Using the latest expo release and start the dev for the web.

[TheForgetTime]

Got the exact same issue.

Using:
"expo": "^51.0.9"
"@react-native-async-storage/async-storage": "1.23.1"
"redux-persist": "^6.0.0"

[t1gu1]

Here's a workaround if you are using something like Zustand:

// Zustand Store
{
      ...,
      storage: createJSONStorage(() =>
        Platform.OS === "web" ? localStorage : AsyncStorage
      ),
      ...,
}

[adsalihac]

localStorage ?

[coren-frankel]

For those using supabase and seeing this in the stack trace too, check out supabase/supabase-js#786

[t1gu1]

localStorage ?

@adsalihac
Yep, in web localStorage it's simply the native solution. (No even need to import anything to use it)

At least, Zustand is able to deal with that seamlessly.

[adsalihac]

i am using redux with presist , it is support ? @t1gu1 , also what about Zustand , it is better than redux ?

[t1gu1]

@adsalihac Nope Redux is more complexe on that side.
That being said, for you question I would 100% recommend Zustand if you just started your project!

We migrate all our project to use Zustand cause it's stupid easy to use and works really well!
It makes look Redux over complicated for nothings.

[adsalihac]

what about state migration in zustand (like version update) , which zustand is using , official module right ?

it is possible to get data like this (store.getState()?.auth?.user) ?

[t1gu1]

@adsalihac Yes and yes.
Just try it. ;)

[adsalihac]

Thank you @t1gu1

[samkk]

I think I encountered the same problem.
can I help me，please

Using:
"expo": "~51.0.8",
"@react-native-async-storage/async-storage": "1.23.1",
"zustand": "^4.5.2",

ios error message [ReferenceError: Can't find variable: localStorage]

[t1gu1]

Upgrade Expo package: (Just to be sure)

• "expo": "~51.0.13",

Where you create your Zustand store, simply add that for the storage:
#1096 (comment)

Use AsyncStorage for mobile and localStorage for the web.

[azakharchenko-msol]

Confirmed the same issue
use this code as workaround

    if (Platform.OS === 'web') {
      while (typeof window === 'undefined') {
        await new Promise(resolve => setTimeout(resolve, 100));
      }
    }

[t1gu1]

For me it seems like this issue can be close.
I works fine now using only AsyncStorage.
Feels like it was a Expo issue.

[sydro]

some issue here with 2.0.0 version

[kaumac]

I'm having the same issue... Latest expo sdk and react-native-async-storage version

[Undertone0809]

For those using supabase and seeing this in the stack trace too, check out supabase/supabase-js#786

Great! I solve it by the following code.

import { AppState, Platform } from 'react-native';
import 'react-native-url-polyfill/auto';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY;

if (!supabaseUrl || !supabaseAnonKey) {
  throw new Error('Supabase URL or Anon Key is not defined');
}


class SupabaseStorage {
  async getItem(key: string) {
    if (Platform.OS === "web") {
      if (typeof localStorage === "undefined") {
        return null;
      }
      return localStorage.getItem(key);
    }
    return AsyncStorage.getItem(key);
  }
  async removeItem(key: string) {
    if (Platform.OS === "web") {
      return localStorage.removeItem(key);
    }
    return AsyncStorage.removeItem(key);
  }
  async setItem(key: string, value: string) {
    if (Platform.OS === "web") {
      return localStorage.setItem(key, value);
    }
    return AsyncStorage.setItem(key, value);
  }
}

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    storage: new SupabaseStorage(),
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

[XiaoPiHong]

For me it seems like this issue can be close. I works fine now using only AsyncStorage. Feels like it was a Expo issue.

Window cannot be used, otherwise localstorage