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: https://github.com/vercel/next.js/discussions/15687