CODEWITHSUNDEEP
node.jsreactjsisomorphic-javascript
stkvtflw
stkvtflw

Reputation: 13577

How to avoid getting error 'localStorage is not defined' on server in ReactJS isomorphic app?

I was using localStorage in my webApp to store data on client side. But when I've tried to make the app isomorphic, this causes an issue. Due to node is not browser environment, it can't define such objects as 'window', 'localStorage' etc. How do I solve this issue?

Upvotes: 15

Views: 21501

Answers (2)

TmKVU
TmKVU

Reputation: 3000

You could use a check whether the code is being executed on the server or on the client side by checking whether module is not 'undefined':

var isNode = typeof module !== 'undefined'

You can then proceed to only executed this code on the client side:

if(!isNode){
   //use the local storage
   var myItem = localStorage.getItem(itemTitle)
}

However, you should already always check whether Storage is defined before using since not all browsers support it:

if(typeof(Storage) !== "undefined"){
   //use the local storage
}

Upvotes: 15

zalpha314
zalpha314

Reputation: 1495

Standard has specific support for problems like this.

All you need to do is add a comment informing standard that there is a variable provided by the global scope.

// MyStuff.js
/* global localStorage */

// Use localStorage below with no linter errors

Upvotes: 0

Related Questions