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 redux-persist@6.0.0 :-(

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

[goktugerol-dev]

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

[ajaykumareminence]

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.

This still creates noop storage. However it removes the error from console.

[serenegoraya]

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 Worked for me. Thank you so much

[Ahbttw]

“redux-persist failed to create sync storage. falling back to noop storage.” anandbaburajan/Kukkee#64

Any luck from @yousuf4249 ?

[Ahbttw]

@ArturKuzmich have you found any solution? because I am using same Redux + Nextjs + Redux persistor and it throws the error "redux-persist failed to create sync storage. falling back to noop storage."

[TausifM]

any solution fond for REACT NATIVE Error: reduxjs-toolkit-persist: config.storage is required. Try using one of the provided storage engines import storage from 'reduxjs-toolkit-persist/lib/storage'

Version: "reduxjs-toolkit-persist": "^7.2.1"

[MeetBhingradiya]

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;

This is Worked For me Below this is code with simple counter app that i tested in next.js 14.3

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import counterReducer from './test';
import LocalStorage from 'redux-persist/lib/storage';
import { persistReducer } from 'redux-persist';

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

const storage = typeof window !== 'undefined' ? LocalStorage : createNoopStorage();

const persistConfig = {
    key: 'SM_Redux_Data',
    storage
}

const Root_Reducer = combineReducers({
    counter: counterReducer
})

const persistedReducer = persistReducer(persistConfig, Root_Reducer);

export const Store = configureStore({
    reducer: persistedReducer,
    middleware: []
})

export type RootState = ReturnType<typeof Store.getState>;
export type AppDispatch = typeof Store.dispatch;

[developedbyumair]

When NextJS v 14.0.4 is configured with redux v 9.0.4 using eslint and typescript, it works effectively. with both app router and pages router

import { combineReducers, configureStore as createStore } from '@reduxjs/toolkit'
import { persistStore, persistReducer } from 'redux-persist'
import AuthSlice from './src/redux/auth.slice'
import createWebStorage from 'redux-persist/lib/storage/createWebStorage'

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

const storage = typeof window !== 'undefined' ? createWebStorage('local') : createNoopStorage()
const persistConfig = {
  key: 'root',
  storage,
}
const rootReducer = combineReducers({
  auth: AuthSlice,
})
const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = createStore({
  reducer: persistedReducer,
  middleware: MiddlewareArray =>
    MiddlewareArray({
      serializableCheck: false,
      thunk: true,
    }),
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

const persistor = persistStore(store)

export { store, persistor }

and also create types.d.ts global file

declare module 'redux-persist/lib/storage' {
    import { WebStorage } from 'redux-persist/es/types';

    const storage: WebStorage;

    export default storage;
}

[briancalma]

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 !

holy cow! this works for me!

[Sujith360]

Somebody pls tell me how to solve this " redux-persist failed to create sync storage. falling back to noop storage. "

this is my code

import { combineReducers, configureStore } from '@reduxjs/toolkit' import userSlice from './users/userSlice' import userProSlice from './users/userProSlice' import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, } from 'redux-persist' import storage from 'redux-persist/lib/storage';

const persistConfig = { key: 'root', // version: 1, storage, whitelist: ['user'] };

const rootReducer = combineReducers({ user: userSlice, userProjects: userProSlice, },) const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({ reducer: persistedReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }), });

let persistor = persistStore(store) export { store, persistor };

[developedbyumair]

Somebody pls tell me how to solve this " redux-persist failed to create sync storage. falling back to noop storage. "

this is my code

import { combineReducers, configureStore } from '@reduxjs/toolkit' import userSlice from './users/userSlice' import userProSlice from './users/userProSlice' import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, } from 'redux-persist' import storage from 'redux-persist/lib/storage';

const persistConfig = { key: 'root', // version: 1, storage, whitelist: ['user'] };

const rootReducer = combineReducers({ user: userSlice, userProjects: userProSlice, },) const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({ reducer: persistedReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }), });

let persistor = persistStore(store) export { store, persistor };

please read my previous comment fellow this instruction you can easily solve that issue

[techversatile2020]

import { Action, ThunkAction, configureStore } from "@reduxjs/toolkit"; import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, persistReducer, persistStore, } from "redux-persist"; // import storage from "redux-persist/lib/storage"; import rootReducer from "../reducers"; import createWebStorage from "redux-persist/lib/storage/createWebStorage";

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

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

const persistConfig = { key: "root", storage, };

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({ reducer: persistedReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], ignoredActionPaths: ["meta.arg", "payload.timestamp"], ignoredPaths: ["items.dates"], }, }), });

const persistor = persistStore(store);

export { store, persistor };

export type RootState = ReturnType; export type AppDispatch = typeof store.dispatch; export type AppThunk = ThunkAction< ReturnType, RootState, unknown, Action

;

but i am still facing this iissue why

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

[uvistix]

import storage from "@react-native-async-storage/async-storage";

import storage like this, it will work. Happy coding

[sensorario]

Check your package.json file. Is it possibile you have incompatible versions of redux and redux-persist? Not sure about this but I noticed same error occurred in a project with redux 5 and persist 6. I just downgraded redux-persist to version 5 and now works fine. Hope this can help.

[Ayovert]

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 !

Yessss , this solved it for me !😩

[ClayGriifith]

Solved: For me (React Native project) this problem was solved by finding an import in a random file that was made automatically when I declared a variable called 'Session'. This was the import:

import session from "redux-persist/lib/storage/session" Like the others who noted the unused import (import storage from 'redux-persist/lib/storage') this was my issue.

It took me some time to troubleshoot for two reasons:

1. This wasn't even in my redux files so I wasn't looking for the bad import in the right place (needed to search my entire code-base for 'redux-persist' to see where else this might have occurred)
2. I didn't manually write this import, VSCode auto-created it while I was writing a function and I hadn't noticed.

Tip: If this just randomly started happening, look in your recent focus files and see if a similar bad import might have happened.

[vrutik1302]

The createNoopStorage function in store/config.js might be causing issues in SSR environments. Consider using a more refined condition or exploring alternative approaches.

// store/config.js
import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import createWebStorage from 'redux-persist/lib/storage/createWebStorage';

import rootReducer from './reducers';

// Noop storage for SSR for preventing the server-side errors
const createNoopStorage = () => {
  return {
    getItem(_key) {
      return Promise.resolve(null);
    },
    setItem(_key, value) {
      return Promise.resolve(value);
    },
    removeItem(_key) {
      return Promise.resolve();
    },
  };
};
// checks here for storage if not then create the web storage
const storage =
  typeof window !== 'undefined'
    ? createWebStorage('local')
    : createNoopStorage();
const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/PERSIST', 'persist/REHYDRATE'],
      },
    }),
});

export const persistor = persistStore(store);

Please provide more context or information if you have any specific concerns or questions.