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

[hpachy]

Hello!

I learn I to use Hooks and I decide to create a cart on my web app, so I implement with redux-persist to access to my cart content from every where even if the user refresh the page. But at first for some reasons the useSelector do not re-render, even if the obj change in the composeWithDevTools console...

In the cart page (with the client's selected stuff), I got cross next to each articles to delete then if the user decide to take out the article from him cart. Oddly it's work (not really) if I look on the composeWithDevTools, I can see my article is delete from my articleList with articleAdd (action add the new array without article deleted). The front is not re-render... And if I use articleDelete the whole articleList is delete and replace by an empty List, and the re-render WORK!

I follow this implementation : https://github.com/vercel/next.js/tree/canary/examples/with-redux-persist

so it's probably because i'm novice with Hook and nextJs and I really don't find the response to solve it and raise...

Did I use useState , useSelector and useEffect correctly ?
I understand than useDispatch and useSelector handle the re-render if the store changed, am I right ?

(log : redux-persist failed to create sync storage. falling back to noop storage.)

that's the react's function taht's doesn't work :

export default function CartArticleRow({
    ulrImage,
    Name,
    Price,
    courseId,
    store,
  }: Props): ReactElement {
    const dispatch = useDispatch()
    const [SpliceCourseId, setSpliceCourseId] = useState<number | null>(null);
    useEffect(() => {
      if (typeof SpliceCourseId === 'number') {
        var newList: ICourse[] = store.articleList;
        if (newList && newList.length > 0) {
          for (let index: number = 0; index < newList.length; index++) {
            if (newList[index].course_id === SpliceCourseId)
              newList.splice(index, 1);
          }
          dispatch(articleAdd(newList));
       // dispatch(articleDelete()); => this one work not the action above
        }
      }
    }, [SpliceCourseId]);
    return (
      <div
        className="px-2 mt-2"
        style={{ background: "#1c457714", borderRadius: "4px" }}
      >
        <div className="display-flex">
          <div className="">
            <div className="LineItem-imageContainer mr4 LineItem-imageContainer mr4 flex-item width-fixed">
              <img src={ulrImage} alt="" className="LineItem-image" />
            </div>
          </div>
          <div className="text-right my-auto" style={{ width: "100%" }}>
            <span
              onClick={() => {
                setSpliceCourseId(courseId);
              }}
            >
              X
            </span>
          </div>
        </div>
      </div>
    );
  }

App : nextjs, react and typeScript

package.json :

{
  "name": "showcase",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@emotion/styled-base": "^10.0.31",
    "@stripe/react-stripe-js": "^1.1.2",
    "@stripe/stripe-js": "^1.8.0",
    "@types/react-redux": "^7.1.9",
    "axios": "^0.19.2",
    "next": "latest",
    "next-redux-wrapper": "^6.0.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-scroll": "^1.8.0",
    "react-spring": "^8.0.27",
    "react-use": "^15.3.3",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "sitemap": "^6.2.0",
    "stripe": "^8.79.0",
    "swr": "^0.2.3"
  },
  "devDependencies": {
    "@types/node": "^14.0.27",
    "@types/react": "^16.9.43",
    "eslint-plugin-react-hooks": "^4.0.8",
    "prettier": "^2.0.5",
    "typescript": "^3.9.7"
  },
  "extends": [
    "plugin:react-hooks/recommended"
  ],
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

[theIYD]

Getting the same log.

[rokinsky]

This log occurs on the server-side (when you import storage from redux-persist/lib/storage) because you cannot create the local storage in Node.js. 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" ? createWebStorage("local") : createNoopStorage();

export default storage;

Use this storage in the config instead of redux-persist/lib/storage

[alim-ansari]

It works

[mrjackyliang]

This works for me also! There were ESLint and TypeScript errors, so I made some changes below:

import createWebStorage from 'redux-persist/lib/storage/createWebStorage';
import { WebStorage } from 'redux-persist/lib/types';

export function createPersistStorage(): WebStorage {
  const isServer = typeof window === 'undefined';

  // Returns noop (dummy) storage.
  if (isServer) {
    return {
      getItem() {
        return Promise.resolve(null);
      },
      setItem() {
        return Promise.resolve();
      },
      removeItem() {
        return Promise.resolve();
      },
    };
  }

  return createWebStorage('local');
}

[ajaykumareminence]

This still creates a noop storage. However the the log in the console is not an error.

[sumit-6]

It still creates the noop storage

[noyonalways]

Thanks, it works for me.

[kylemh]

I'm getting this same error, but my entire Redux instantiation is hidden behind code which should force it to run on the client only...

import App, { store } from 'app';
import { useEffect, useState } from 'react';

import { GlobalStyles } from 'components/Layouts/AppGlobalStyles';
import { Provider } from 'react-redux';

function AirApp() {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) return null;

  return (
    <Provider store={store}>
      <GlobalStyles />
      <App />
    </Provider>
  );
}

export default AirApp;

any ideas why it still attempts to build on the server?

---

edit: I tried simply following your suggestion anyways:

import { Persistor, persistReducer, persistStore } from 'redux-persist';
import { Store, applyMiddleware, createStore } from 'redux';
import createSagaMiddleware, { Task } from 'redux-saga';

import createRootReducer from './rootReducer';
import { reactors } from './reactors';
import createWebStorage from 'redux-persist/lib/storage/createWebStorage';
import migrate from 'app/store/stateMigrations';
import rootSagas from 'app/store/sagas';
import subscribeToStore from 'app/store/subscribeToStore';
import thunkMiddleware from 'redux-thunk';

export interface SagaStore extends Store {
  sagaTask?: Task;
}

const bindMiddleware = (middleware: any[]) => {
  if (process.env.NODE_ENV !== 'production') {
    const { composeWithDevTools } = require('redux-devtools-extension');
    return composeWithDevTools(applyMiddleware(...middleware));
  }

  return applyMiddleware(...middleware);
};

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();
    },
  };
};

export let persistor: Persistor;

export const makeStore = () => {
  const sagaMiddleware = createSagaMiddleware();
  const middleware = [sagaMiddleware, thunkMiddleware];
  const storage = typeof window !== 'undefined' ? createWebStorage('local') : createNoopStorage();

  const persistConfig = {
    key: 'primary',
    version: 9,
    storage,
    migrate,
  };

  const persistedReducer = persistReducer(persistConfig, createRootReducer());
  const store = createStore(persistedReducer, bindMiddleware(middleware));

  persistor = persistStore(store);

  (store as SagaStore).sagaTask = sagaMiddleware.run(rootSagas);

  subscribeToStore(store, [...reactors]);

  return store;
};

but I still get the same error as OP

[marcobejarano]

[Raghunadh9]

bro, please share your code bro it will be helpful to others...

[ajaykumareminence]

this is the right code mentioned above. However the reason this is happening is because the store is being initialized during server side rendering. That is why the code is unable to identify the localStorage as it is available on client side. That is why it is falling back to noop storage.

[sayedulkrm]

Thank you so much. It did work in my new Next13. But creating web store I have to add this "use client" on top of the storage.ts

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

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"
        ? createWebStorage("local")
        : createNoopStorage();

export default storage;

[GustinDev]

It worked! Thanks

[ManojThulung]

Worked for me. thanks.

[tareq-mahmood-sazim]

the whole redux loads and works on client side but not in server side, "use client"; has to be at the top to use redux.

[sayedulkrm]

@tareq-mahmood-sazim Yes but other files like (store.ts, hook.ts, slice etc) you don't have to write "use client"( you have to write if u do some cases but in generally don't).

[kevoj7]

Best way to do in nextjs w/ app router 13.4 >, is to call it inside your app/layout.tsx, for some reason I had to do it this way in order to completely code split it.

################################################################################
// src/redux/store.ts
import {combineReducers, configureStore} from "@reduxjs/toolkit";
import {useDispatch, TypedUseSelectorHook, useSelector} from "react-redux";
import {persistReducer} from "redux-persist";
import userProfileSlice from "./slices/userProfileSlice"
import storage from "redux-persist/lib/storage";
import authReducer from './slices/authSlice';

const userProfilePersistConfig = {
key: "profileUserType",
storage: storage,
whitelist: ["profileUserType"], // Only persist the profileUserType slice
};

const rootReducer = combineReducers({
auth: authReducer, // This will not be persisted
profileUserType: userProfileSlice, // This slice is set to be persisted
});

const persistedReducer = persistReducer(userProfilePersistConfig, rootReducer);

export const store = configureStore({
reducer: persistedReducer, // Use the persisted reducer
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({serializableCheck: false})
});

export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch;

export const useAppDispatch = () => useDispatch();
export const useAppSelector: TypedUseSelectorHook = useSelector;

################################################################################
// src/redux/provider.tsx
'use client';
import {Provider} from "react-redux";
import {PersistGate} from "redux-persist/integration/react";
import {persistStore} from "redux-persist";
import {store} from "@/redux/store";

const persistor = persistStore(store);

export default function ReduxProvider({children}: { children: React.ReactNode }) {
return (


{children}


);
}
####################################################################################################
inside src/app/layout.tsx (this is configuring it at the root level, i.e everything in your app will work with this)
For some reason I had to import it this way using "next/dynamic", this allowed me to circumvent most of the workarounds for implementing redux-persist w/ nextjs app router:

import dynamic from "next/dynamic";
const PersistedReduxProvider = dynamic(
() => import("@/redux/provider"),
{ ssr: false }
);

export const metadata = {
title: "ACME",
description: "ACME EXAMPLE",
};

export default function RootLayout({children}: {
children: React.ReactNode;
}) {
return (




{children}



);
}

[danya0365]

Redux persist storage only work on client side

just fix by dynamic import in layout.tsx

import dynamic from 'next/dynamic'; const ReduxProviders = dynamic(() => import('@/providers/redux-provider'), { ssr: false });

[abhishek98s]

Thank you for the solution
It actually worked

[an8ar]

I am using next js appRouter. I ve implemented the redux according oficial docs.
https://redux-toolkit.js.org/usage/nextjs#creating-a-redux-store-per-request

`import { configureStore } from '@reduxjs/toolkit'

export const makeStore = () => {
return configureStore({
reducer: {},
})
}

// Infer the type of makeStore
export type AppStore = ReturnType
// Infer the RootState and AppDispatch types from the store itself
export type RootState = ReturnType<AppStore['getState']>
export type AppDispatch = AppStore['dispatch']`

redux is working, but the persist is not working with such implementation of redux. If I use redux as usual, not using HOF; the persist work. However, such redux does not shown in reduxDevTools.

are there any solution for such problem?

and what redux implementation should we use?

[hoogmin]

I am using Next.js 14.2.5 along with Redux Toolkit ^2.2.7 on my project. I want to write this for anyone confused about this as many answers on the internet are just wrong. The accepted answer on this thread is NOT correct and will still create noop storage, just without an error message on the console. The reason for this happening is because Next.js always compiles components on the server EVEN if you have the use client directive at the top. Due to this, it can't compile things using localStorage or sessionStorage which brings about this error. Here is an example of what works and what doesn't:

export default function StoreProvider({ children }: StoreProviderProps) {
    const storeRef = useRef<AppStore>()
    const [loading, setLoading] = useState<boolean>(true)

    if (!storeRef.current) {
        // Create the store instance for the first time this renders
        storeRef.current = makeStore()
    }

   // Any references outside of useEffect will return a ReferenceError,
   // which leads to redux-persist's error.
    useEffect(() => {
        localStorage.getItem("mykey") // works!
        // or sessionStorage, whichever you need.
        // other client-side logic...
    }, [])

    if (loading) {
        return <CircularProgress/>
    }

    return (
        <Provider store={storeRef.current}>
            {children}
        </Provider>
    )
}

So for any code that needs to interact with client-side APIs, ensure you do it all within useEffect to guarantee that it only runs on the client and still compiles on the server as Next.js ignores useEffect in its compilation process. The important thing to take from this is that Next.js will ALWAYS compile server-side regardless if the use client directive is present or not, which is very misleading. The component still runs on the client but the compilation step is always on the server. So just keep this in mind for your Next.js projects and I hope this helps save someone through the several days I had to deal with this.

tldr;

• Do everything that uses client-side APIs in a useEffect
• Remember that regardless of component type, server or client, the compilation step always happens on the server