localStorage is not defined. about react-snapshot

[patelrikin]

I solved it by adding local-storage polyfill for development dependency

npm i -D localstorage-polyfill
OR
yarn add -D localstorage-polyfill

In your App's index.js file add following:
import 'localstorage-polyfill'

This solved error for me.

[arefaslani]

You should not use localStorage instance in the component's render or any method that is evaluated in the server. Move localStorage calls in the componentWillMount method for example. I've solved my problem this way.

[felipedaraujo]

@Danjavia, did @arefaslani's strategy work for you? I moved my localStorages inside componentWillMount and it still throws the same error, localStorage is not defined. I also tried to use componentDidMount.

[Danjavia]

I have the same trouble too.

[Danjavia]

:(

[arefaslani]

I have same problem... How to solve this kind of issues?

[Danjavia]

Thanks @arefaslani I will to try it.

[stereobooster]

Jsdom issue won't be fixed, see #44 (comment). If this answers your question please close issue. Thanks

[kostyaVyrodov]

I have the same issue.
As far as I see it the react-snapshot just doesn't have global localStorage, so I'd tried to wrap localStorage and it worked for me.

export const getAuthTokens = () => {
    try {
        // The problem was here
        const tokens = localStorage.getItem(AUTH_ACCESS_TOKEN);
        if (tokens !== null) {
            return JSON.parse(tokens);
        }

        return null;
    } catch (e) {
        console.log(e.message);
        return null;
    }
};

It's not the best solution, but it helped me.

[Devilla]

Did you export this globally? Or inside the component?

[Devilla]

Try this with globals :

"globals": {
"window": true,
"browser": true,
"localStorage":true,
}

[cesargamboa]

Use getDerivateStateFromProps, and place the localStorage in there, that worked for me.

[yuyuanlin1991]

I use localstorage in componentDidMount function,not construction,and solved the error

[DonGiulio]

I had the same error, caused by the credentials verification library. I worked this around this by creating a helper function:

export const storage = () => {
  if (!typeof window.localStorage === "undefined") return window.localStorage;
  else if (!typeof localStorage === "undefined") return localStorage;
  else return false;
};

and checking the availability of localStorage before each call to methods using it:

- verifyCredentials(store);
+ storage() && verifyCredentials(store);

[squeakycheese75]

I managed to get this working by extending comments earlier and constructing aalocalStorageWraapper.

const localStorageMock = function () {
var store = {};
return {
getItem: function (key) {
return store[key];
},
setItem: function (key, value) {
store[key] = value.toString();
},
clear: function () {
store = {};
},
removeItem: function (key) {
delete store[key];
},
};
};

const storage = () => {
if (!typeof window.localStorage === "undefined") return window.localStorage;
else if (!typeof localStorage === "undefined") return localStorage;
else return localStorageMock();
};

module.exports = { storage };

I had the same error, caused by the credentials verification library. I worked this around this by creating a helper function:

export const storage = () => {
  if (!typeof window.localStorage === "undefined") return window.localStorage;
  else if (!typeof localStorage === "undefined") return localStorage;
  else return false;
};

and checking the availability of localStorage before each call to methods using it:

- verifyCredentials(store);
+ storage() && verifyCredentials(store);

[oseisaac]

I solved it by adding local-storage polyfill for development dependency

npm i -D localstorage-polyfill
OR
yarn add -D localstorage-polyfill

In your App's index.js file add following:
import 'localstorage-polyfill'

This solved error for me.

I keep getting this error when I import

`TypeError: Cannot set property localStorage of # which has only a getter
(anonymous function)
node_modules/localstorage-polyfill/localStorage.js:39
36 | }
37 | const instance = new LocalStorage()
38 |

39 | global.localStorage = new Proxy(instance, {
40 | set: function (obj, prop, value) {
41 | if (LocalStorage.prototype.hasOwnProperty(prop)) {
42 | instance[prop] = value`