Importing storage on the server shows error

[Floriferous]

I'm using redux-persist in an SSR setup, and I'm getting an annoying issue on the server when I try to import storage:

// (STDERR) redux-persist failed to create sync storage. falling back to memory storage.
import storage from 'redux-persist/lib/storage';

While I know that it doesn't make sense to use localStorage on the server, I also do not actually use it in my server setup, but this is shared code between the client and server.

Could there be a way to share code without having to resort to conditional imports (my current workaround) ?:

  const storage = isClient && require('redux-persist/lib/storage');

Or maybe the error message should be dropped altogether, given that it's not really helpful anyways (why did it fail..?)? It took me quite some time between all the different components and functions of this package to figure out that merely importing localStorage was causing the error.

EDIT: typo

[ZhangYiJiang]

Yes, it looks like the module has side effects - storage/index.js exports the result of calling createWebStorage. Another way around it other than using conditional import with require is to import getStorage directly, and wrap it in, say, lodash's memoize so we get the same storage instance every time it is called.

import getWebStorage from 'redux-persist/lib/storage/getStorage';
import { memoize } from 'lodash';

const getStorage = memoize(getStorage);

If you just need to silence the error in unit tests, just mock the module to do nothing using eg. Jest's manual mock https://facebook.github.io/jest/docs/en/manual-mocks.html

[tje3d]

@ZhangYiJiang i still can't get it working using mocks :(

[tomaswitek]

I am also getting this error on a server when working with Next.js + Redux persist:

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

Using:

    "react": "^16.2.0",
    "redux": "^3.7.2",
    "redux-persist": "^5.9.1",
    "next": "^5.1.0",

My workaround:

  const getReducers = isServer => {
    if (isServer) {
      return reducers.serverReducers;
    } else {
      const storage = require('redux-persist/lib/storage');

      const persistConfig = {
        ...config,
        storage: storage.default,
      };

      return persistReducer(persistConfig, reducers.clientReducers);
    }
  };

[ZhangYiJiang]

@tomaswitek Run your app in NODE_ENV=production. This will suppress the error, and enable some optimizations in React if you're using that.

@tje3d What I did was to write a wrapper around persistReducer, and imported storage in the same file. In test I just mocked the file so redux-persist/lib/storage is never imported

// persistReducer.js
import { persistReducer as basePersistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

export default function persistReducer(key, reducer, options = {}) {
  return basePersistReducer(
    {
      key,
      storage,
      ...options,
    },
    reducer,
  );
}

I'm using Jest, but other mocking libraries should have similar functionality

// In tests - this has to be at the root so that Jest can hoist it so this runs before the import 
jest.mock('./persistReducer', () => (key, reducer) => reducer);

[tomaswitek]

Thx @ZhangYiJiang

[rubenesda]

@Floriferous I'm getting the same console error in my terminal when I started my App configured with SSR node start build/server.js with nodemon.

redux-persist failed to create sync storage. falling back to memory storage.
But, I go to my app running in my browser and I checked that the data whether to be saving in LocalStorage correctly. Then Is the console log an Error? or Warning? Is there something for changing? or Does App run fine?
I wait for your answer soon.

[Floriferous]

Hi @rubenesda, I'm not using this package anymore, I don't really remember this issue.

Try to avoid importing LocalStorage on your server-side code, and have a client-only persistor.