title: React app hosted on Heroku throw 500 Server error
body: <p>I have a react app which works perfectly on my local Node.JS server. But when I try to use heroku to host it online it throws error and I can't access the website. I think it has something to do with rendering one of my components.</p>
  
  <p><strong>Heroku CLI Error log:</strong></p>
  
  <pre><code>2020-03-17T18:33:00.452210+00:00 heroku[router]: at=info method=GET path="/" host=distributed-care.herokuapp.com request_id=e6b39986-507f-4458-a126-9af86abd2006 fwd="178.221.193.75" dyno=web.1 connect=1ms service=2332ms status=500 bytes=2628 protocol=https
  2020-03-17T18:40:04.350680+00:00 app[web.1]: ReferenceError: window is not defined
  2020-03-17T18:40:04.350693+00:00 app[web.1]: at new setState (/app/build/static/js/components/SecondaryNav/SecondaryNav.js:32:10)
  2020-03-17T18:40:04.350694+00:00 app[web.1]: at i (/app/build/static/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:606:24)
  2020-03-17T18:40:04.350695+00:00 app[web.1]: at isValidElement (/app/build/static/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:655:12)
  2020-03-17T18:40:04.350696+00:00 app[web.1]: at e.render (/app/build/static/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:811:44)
  2020-03-17T18:40:04.350697+00:00 app[web.1]: at e.suspenseDepth [as read] (/app/build/static/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:784:18)
  2020-03-17T18:40:04.350697+00:00 app[web.1]: at Object.renderToString (/app/build/static/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:668:10)
  2020-03-17T18:40:04.350698+00:00 app[web.1]: at routeConfiguration (/app/build/static/js/index.js:113:27)
  2020-03-17T18:40:04.350699+00:00 app[web.1]: at Object.exports.render (/app/server/renderer.js:95:26)
  2020-03-17T18:40:04.350699+00:00 app[web.1]: at /app/server/index.js:201:29
  2020-03-17T18:40:04.350700+00:00 app[web.1]: at processTicksAndRejections (internal/process/task_queues.js:97:5)
  2020-03-17T18:40:04.350848+00:00 app[web.1]: server-side-render-failed
  2020-03-17T18:40:04.350970+00:00 app[web.1]: undefined
  </code></pre>
  
  <p>So I have tried running the server online without SecondaryNav component, and it works, so SecondaryNav is making issue.</p>
  
  <p><strong>SecondaryNav.js</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import classnames from "classnames";
  import css from './SecondaryNav.css';
  
  export default class SecondaryNav extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        prevScrollpos: window.pageYOffset,
        visible: true
      };
    }
  
    // Adds an event listener when the component is mount.
    componentDidMount() {
      window.addEventListener("scroll", this.handleScroll);
    }
  
    // Remove the event listener when the component is unmount.
    componentWillUnmount() {
      window.removeEventListener("scroll", this.handleScroll);
    }
  
    // Hide or show the menu.
    handleScroll = () =&gt; {
      const { prevScrollpos } = this.state;
  
      const currentScrollPos = window.pageYOffset;
      const visible = prevScrollpos &gt; currentScrollPos;
  
      this.setState({
        prevScrollpos: currentScrollPos,
        visible
      });
    };
  
    render() {
      return (
        &lt;div className={classnames(css.navbar, css.secondaryMenu, {
          [css.navbarHidden] : !this.state.visible
          })}&gt;      
          &lt;ul&gt;
            &lt;li&gt;&lt;span&gt;Senior Care&lt;/span&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;Elderly&lt;/span&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;In-home Care&lt;/span&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;Look After&lt;/span&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;Verified&lt;/span&gt;&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;See All Categories&lt;/span&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>SecondaryNav.css</strong></p>
  
  <pre><code>@import '../../marketplace.css';
  
  .navbar {
      height: 40px;
      transition: height .35s ease-out;
    }
  
    .navbarHidden {
      height: 0;
    }
  
    .secondaryMenu {
      margin: 0 auto;
      box-shadow: 0 1px 6px rgba(57,73,76,.35);
  
      @media (max-width: 1170px) {
        display: none !important;
      }
  
      @media (--viewportLarge) {
          position: absolute;
          left: 0;
          right: 0;
          margin: auto;
          background-color: #0095b3;
          box-shadow: -900px 0 0 #f9f9f9, -900px -1px 0 #e0e0e0, 900px 0 0 #f9f9f9, 900px -1px 0 #e0e0e0, 0 -1px 0 #e0e0e0;
          overflow: hidden;
      }
    }
  
    .secondaryMenu ul {
      width: 1170px;
      padding: 0 24px;
      display: flex;
      justify-content: space-between;
      list-style: none;
      overflow: hidden;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
  
    }
  
    .secondaryMenu ul li {
      display: flex;
      align-items: center;
      padding: 0 0 2px;
      color: #fff;
    }
  
    .secondaryMenu ul li:hover {
      cursor: pointer;
    }
  
    .secondaryMenu ul li span {
      font-size: 16px;
      font-weight: 300;
    }
  </code></pre>
  
  <p>What am I doing wrong and is there anyway I can fix this? As I said it works perfectly on my local server but on heroku throws error. I would also appriciate if anyone can just tell me what is caussing the issue.</p>
  
  <p>Regards!</p>