title: window, document and local Storage in React server side rendering
body: <p>In my React application, I am using <code>window</code> object , <code>document</code> object and <code>localStorage</code>.</p>
  
  <p>To avoid errors, I have set it up like:</p>
  
  <pre><code>var jsdom = require("jsdom");
  
  var doc = jsdom.jsdom("");
  
  if (typeof localStorage === "undefined" || localStorage === null) {
    var LocalStorage = require('node-localstorage').LocalStorage;
    localStorage = new LocalStorage('./scratch');
    global.localStorage = localStorage;
  
  }
  
  var win = doc.defaultView
  
  console.log("document default viewwwwwwwwwwwwwwwwww", doc);
  
  global.document = doc
  global.window = win
  
  function propagateToGlobal (window) {
      for (let key in window) {
          if (!window.hasOwnProperty(key)) continue
          if (key in global) continue
  
          global[key] = window[key]
      }
  }
  
  propagateToGlobal(win)
  </code></pre>
  
  <p>But in my application, I want real window, ,real localStorage and real document to be used instead of what I have set up above.</p>
  
  <p>localStorage created this directory scratch.Does that mean browser localStorage would not be used now?</p>
  
  <p>Also, the console statement gives this if I try to console doc variable and is being used in place of document variable which is creating problem:</p>
  
  <pre><code>Document { location: [Getter/Setter] }
  </code></pre>
  
  <p>This is the script I have :</p>
  
  <pre><code>&lt;script dangerouslySetInnerHTML={{__html:(function(w,d,s,l,i){
          console.log(d.getElementsByTagName(s)[0]);
         w[l]=w[l]||[];
          w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});
            var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';
             j.async=false;
          j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;
          console.log("f is",f);
          f.parentNode ? f.parentNode.insertBefore(j,f) : false;
        })(window,document,'script','dataLayer','ID')}}/&gt;
  </code></pre>
  
  <p>Here getElementByTagName returns undefined and not an element as it should. How do I fix this?</p>