title: React - “localStorage is not defined” error showing
body: <p>I am trying to make my website SEO friendly with meta tags.
  I am implementing server-side rendering in my application. After this, I am getting the following error:</p>
  
  <blockquote>
    <p>ReferenceError: localStorage is not defined.</p>
  </blockquote>
  
  <p>Please help how to resolve it.</p>
  
  <p>My <code>package.json</code>:</p>
  
  <pre><code>{
  
  
   "main": "server.js",
   "scripts": {
    "start-dev": "NODE_ENV=development webpack -w &amp; NODE_ENV=development node server.js",
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
    "axios": "^0.18.0",
    "express": "^4.15.3",
    "firebase": "^4.12.1",
    "html2canvas": "^1.0.0-alpha.12",
    "react": "^16.2.0",
    "react-adsense": "0.0.5",
    "react-dom": "^16.2.0",
    "react-facebook-login": "^4.0.1",
    "react-google-login": "^3.2.1",
    "react-meta-tags": "^0.3.0",
    "react-router-dom": "^4.2.2",
    "react-router-match-as-promised": "^1.0.5",
    "react-scripts": "1.1.1",
    "react-share": "^2.1.1",
    "react-slick": "^0.22.3"
   },
   "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react-app": "^3.1.2",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "postcss-loader": "^2.0.6",
    "webpack": "^3.1.0",
    "webpack-node-externals": "^1.7.2"
   }
  }
  </code></pre>
  
  <p>Meta Tags commonly used in all pages.
  Home.js</p>
  
  <pre><code>&lt;code&gt;
  import React, { Component } from 'react';
  import axinst from '../common';
  import {TabBox,TabBox2,TabBox3} from '../common/tabbox';
  import Ads  from '../common/ads';
  import SubscribeFrm from '../common/subscribefrm';
  import MetaTags from 'react-meta-tags';
  import AdSense from 'react-adsense';
  import Loader from '../common/loader';
  
  class Home extends Component {
    constructor(props) {
      super(props);
    }
  
    state = {
      header:[],
      otherSports:[],
      wizztalk:[],
      sports:[],
      isProgress:'',
      activeCat: '',
      metaTitle:'',
      metaDesc:'',
      metaKey:''
    }
  
    componentDidMount(){
  
  
      // axinst.get('/home')
      this.setState({isProgress:true});
      axinst.get('/home').then(response =&gt; {
        this.setState({isProgress:false});
        const header = response.data.data.Header;
        const sports = response.data.data.Sports;
        const otherSports = response.data.data.OtherSports;
        const wizztalk = response.data.data.Wizztalk;
        const metaTitle = response.data.data.metaTitle;
        const metaDesc = response.data.data.metaDesc;
        const metaKey = response.data.data.metaKeyword;
        this.setState({header});
        this.setState({sports});
        this.setState({otherSports})
        this.setState({wizztalk});
        this.setState({metaTitle});
        this.setState({metaDesc});
        this.setState({metaKey});
      }).catch(function (error) {
        // console.log(error);
        // console.log('error');
      });
    }
  
    render() {
      const hD = this.state.header;
      const sport = this.state.sports;
      return (
      &lt;div id="maincontent"&gt;
          &lt;MetaTags&gt;
            &lt;title&gt;{this.state.metaTitle}&lt;/title&gt;
            &lt;meta name="title" content={this.state.metaTitle} /&gt;
            &lt;meta name="keywords" content={this.state.metaKeyword} /&gt;
            &lt;meta name="description" content={this.state.metaDesc} /&gt;
            &lt;meta name="og:description" content={this.state.metaDesc} /&gt;
            &lt;meta name="og:title" content={this.state.metaTitle} /&gt;
            &lt;meta name="og:image" content={process.env.PUBLIC_URL +"/images/logo.png"}/&gt;
          &lt;/MetaTags&gt;
  &lt;/code&gt;
  </code></pre>