redux-persist failed to create sync storage. falling back to noop storage

[kaleshasheik]

I have configured redux-perist in my React.js application like below. While launching application, I am getting below error in console. How to fix it ?

Error: redux-persist failed to create sync storage. falling back to noop storage

import storage from 'redux-persist/lib/storage' const persistConfig = { key: 'root', storage, }

[mohammedmulazada]

I have the exact same issue, strangely enough resaving the project does make it suddenly work. Using AsyncStorage from the react native community also doesnt fix it.

[mohammedmulazada]

Changing redux-persist to version ^5.10.0 does somehow fix this issue.

[wardjk87]

Same issue even when using Expo 38 and importing from @react-native-community/async-storage. With Expo 38, async storage is now imported from react-native-community instead of react-native, but this doesn't seem to resolve this issue.

[joshwinter]

Changing redux-persist to version ^5.10.0 does somehow fix this issue. This is the only thing that has worked for me. This seems like a winner for now.

[rokinsky]

I'm having the same issue with 6.0.0 during SSR in dev mode. Is it possible to disable this warning when typeof window === "undefined"?

[rokinsky]

I'm having the same issue with 6.0.0 during SSR in dev mode. Is it possible to disable this warning when typeof window === "undefined"?

btw, here is my workaround:

import createWebStorage from "redux-persist/lib/storage/createWebStorage";

const createNoopStorage = () => {
  return {
    getItem(_key) {
      return Promise.resolve(null);
    },
    setItem(_key, value) {
      return Promise.resolve(value);
    },
    removeItem(_key) {
      return Promise.resolve();
    },
  };
};

const storage =
  typeof window === "undefined" ? createNoopStorage() : createWebStorage();

export default storage;

[frankpaul142]

In my case the problem was that I was trying to use the old store in other files that needed to be changed to AsyncStorage

[vinhphamthanh13]

The "noop" storage issue is not solved yet. After a while, uhm, almost half of the year!

[ashley00101010]

What does the error mean and what does it do if it is failing to create a sync storage? Because my persistance state is working as expected.

[DaveMitten]

Any updates on this redux-persist?

[Gregory-Canonne]

where exactly this problem comes from ?

[Pandazaur]

I found out that I had an unused import storage from 'redux-persist/lib/storage' in my files that produced this error. After removing all these imports, everything work fine !

[rishav4101]

In case of NextJs (or SSR based application), the issue is solved by using storage conditionally based on it is client side or server side for persisting the states. As for the matter of fact the 'window is not defined on server side'.

Example code :

const isClient = typeof window !== "undefined";

let mainReducer;
if (isClient) {
 const { persistReducer } = require("redux-persist");
 const storage = require("redux-persist/lib/storage").default;

 const rootPersistConfig = {
   key: "root",
   storage: storage,
   blacklist: ["countries"],
 };

 const countriesPersistConfig = {
   key: "countries",
   storage: storage,
   whitelist: ["countriesList"],
 };

 /* COMBINE REDUCERS */
 const combinedReducers = combineReducers({
   countries: persistReducer(countriesPersistConfig, countries),
 });

 mainReducer = persistReducer(rootPersistConfig, combinedReducers);
} else {
 mainReducer = combineReducers({
   countries,
 });
}

If it still doesn't solve the problem. Do try reading through this thread - using-redux-with-redux-persist-with-server-side-rendering

Thank you.

[cederom]

The same here with [email protected] :-(

Update: I am running React-Native with expo run:android on Android phone. From the backtrace it seems createWebStorage is called even though AsyncStorage is selected in config according to the info on the main project page / readme.

Update: Okay I made it work, sorry :-)

import AsyncStorage from '@react-native-community/async-storage';
import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'

const persistConfig = {
  key: 'root',
  storage: AsyncStorage
}

For some reason import storage from 'redux-persist/lib/storage' // defaults to localStorage for web this line must be removed as this selects WebStorage even for a mobile application. Maybe a small improvement hint for next release? :-)

Thank you for this marvelous library! I am using it to store data in AsyncStorage and secure tokents in ExpoSecureStore (KeyChain interface). Debugging helped me to even more understand how redux actions/reducers work :-)

Have a great day! :-)

[tylim88]

import AsyncStorage from '@react-native-async-storage/async-storage'

const persistConfig = {
  key: 'root',
  storage: AsyncStorage
}

is having the same issue, I look everywhere on google but none of the solutions are working

[JusticeBringer]

I'm having the same issue with 6.0.0 during SSR in dev mode. Is it possible to disable this warning when typeof window === "undefined"?

btw, here is my workaround:

import createWebStorage from "redux-persist/lib/storage/createWebStorage";

const createNoopStorage = () => {
  return {
    getItem(_key) {
      return Promise.resolve(null);
    },
    setItem(_key, value) {
      return Promise.resolve(value);
    },
    removeItem(_key) {
      return Promise.resolve();
    },
  };
};

const storage =
  typeof window === "undefined" ? createNoopStorage() : createWebStorage();

export default storage;

You have to pass an argument in createWebStorage() function. It is createWebStorage('local').

Found out here.

[Dragosh-lunchCo]

Same issue here, any solution? Only downgrading the library seem to work.

[Dragosh-lunchCo]

Actually setting the stateReconciler to hardSet fixes the issue!

const persistConfig = {
  key: 'root',
  storage,
  stateReconciler: hardSet,
}

[jeremiahcanlas]

Actually setting the stateReconciler to hardSet fixes the issue!

const persistConfig = {
  key: 'root',
  storage,
  stateReconciler: hardSet,
}

negative, still getting the error, any more solutions to this?

[anwarhamr]

Anyone sort this out for AsyncStorage? Seeing the same thing after following the instructions verbadam

[adamsimonini]

I found out that I had an unused import storage from 'redux-persist/lib/storage' in my files that produced this error. After removing all these imports, everything work fine !

Good catch! I had the same thing on my end.

[eeshankeni]

I found out that I had an unused import storage from 'redux-persist/lib/storage' in my files that produced this error. After removing all these imports, everything work fine !

Good catch! I had the same thing on my end.

I had the same problem! Replaced the storage with AsyncStorage and also removed the lib/storage import. Works now!

[saravanakumarRN]

I found out that I had an unused import storage from 'redux-persist/lib/storage' in my files that produced this error. After removing all these imports, everything work fine !

This one work for me

[yousuf4249]

Solved

import { applyMiddleware } from 'redux'
import { configureStore } from '@reduxjs/toolkit'
import reducers from '../reducers/index'
import { persistStore, persistReducer } from 'redux-persist'
// import storage from 'redux-persist/lib/storage'
import storageSession from 'reduxjs-toolkit-persist/lib/storage/session'
import thunk from 'redux-thunk'

const persistConfig = {
  key: 'persist-store',
  storage : storageSession,
}


const persistedReducer = persistReducer(persistConfig, reducers)

const store = configureStore({
  reducer: persistedReducer,
  middleware: [thunk],  devTools: process.env.NODE_ENV !== 'production',
})

export const persistor = persistStore(store)

export default store;

[ArturKuzmich]

@yousuf4249 Can I get a detailed solution from you? I am trying to create a Redux store with NextJs, But while I can not understand what is going wrong, I get an error in the console redux-persist failed to create sync storage. falling back to noop storage. TypeError: Cannot read properties of undefined (reading 'getState')

I tried to create something similar to what you described as a solution, but I'm clearly missing something

[ValentineCodes]

@yousuf4249 Thunk middleware is provided by default in configureStore. See https://redux-toolkit.js.org/usage/usage-guide#using-middleware-to-enable-async-logic

[ArturKuzmich]

@yousuf4249 sorry for asking. perhaps you could show a code example with Redux + Nextjs + Redux persistor set up. I still couldn't save the data when changing the page in my store

[ge-infosec]

The following error is thrown when loading the page not when running the server.

redux-persist failed to create sync storage. falling back to noop storage.

REASON: The redux is only configured for the client side only. It should also be integrated to work on the server side as well.

next-redux-wrapper has not been implemented.

[aaraomelo]

const createNoopStorage = () => { return { getItem(_key: any) { return Promise.resolve(null); }, setItem(_key: any, value: any) { return Promise.resolve(value); }, removeItem(_key: any) { return Promise.resolve(); }, }; };

const storage = typeof window === "undefined" ? createNoopStorage() : require("redux-persist/lib/storage").default;

export default storage;

[duyrk]

I found out that I had an unused import storage from 'redux-persist/lib/storage' in my files that produced this error. After removing all these imports, everything work fine !

Oh my god just this one line. Thank you and it's almost 3AM already. Night night