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

[shiam-technext]

I am trying to use redux-persist along with redux-toolkit to store data on local storage on Next Js and TypeScript. But it responded with this error message: "redux-persist failed to create sync storage. falling back to noop storage | Next js"

Here is my store.ts file:

import { configureStore } from '@reduxjs/toolkit';
import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, persistReducer, persistStore } from 'redux-persist';
import languageReducer from './features/language/languageSlice';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
  key: 'mintbookeeping',
  storage: storage,
};

const persistedReducer = persistReducer(persistConfig, languageReducer);

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

export const persistor = persistStore(makeStore());

export type AppStore = ReturnType<typeof makeStore>

export type RootState = ReturnType<AppStore['getState']>
export type AppDispatch = AppStore['dispatch']

[rajneesh069]

Hey are you getting a white screen for 5 seconds when you use redux-persist and then the content starts loading?

[ciruz]

@rajneesh069 I have multiple Next.js projects (v12/v13/v14 w/o app router), some with Redux, some with Zustand, and yes, on one project I get the same error (redux-persist failed to create sync storage. falling back to noop storage.) and a white screen for multiple seconds, when using redux-persist. I assume this must be something project specific or a small mistake I made somewhere, since it's only on this one project.

[rosairekota]

Hey @shiam-technext . I had the same problem. Here is the answer to your concern on this link:
vercel/next.js#15687

[Umamad]

Hey are you getting a white screen for 5 seconds when you use redux-persist and then the content starts loading?

Hi, I hope you do well.
I solved this problem by adding a timeout option to persistConfig object.

const persistConfig = {
  key: 'mealzo-persist',
  storage,
  whitelist: [userSlice.name],
  timeout: 1000,
};

[mohamed-hassaan3]

I'm getting the same thing while using Next.js and Redux Toolkit and I keep trying to solve it

[siginie]

getting the same problem, adding a timeout option to persistConfig object cannot fixed it, but i trying to do this code, it not response error.

import { configureStore } from "@reduxjs/toolkit";
// import storage from "redux-persist/lib/storage";
import createWebStorage from "redux-persist/lib/storage/createWebStorage";

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

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

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

export const store = configureStore({
  reducer: {
    customizer: persistReducer<any>(persistConfig, CustomizerReducer),
  },
  devTools: process.env.NODE_ENV !== "production",
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({ serializableCheck: false, immutableCheck: false }),
});

[taofik-adeniyi]

Hey are you getting a white screen for 5 seconds when you use redux-persist and then the content starts loading?

Hi, I hope you do well. I solved this problem by adding a timeout option to persistConfig object.

const persistConfig = {
  key: 'mealzo-persist',
  storage,
  whitelist: [userSlice.name],
  timeout: 1000,
};

thanks the timeout worked

[kkolade]

timeout: 1000,

This only remove the console error message but did not persist the payload

[zubaerSumon]

***This worked for me

replace

import storage from 'redux-persist/lib/storage';

by

import createWebStorage from 'redux-persist/lib/storage/createWebStorage';
const createNoopStorage = () => {
return {
getItem() {
return Promise.resolve(null);
},
setItem(key: string, value: any) {
return Promise.resolve(value);
},
removeItem() {
return Promise.resolve();
},
};
};

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