title: React: TypeError: Cannot convert undefined or null to object
body: <p>I am running a React application. </p>
  
  <p>When I enter the page through routes(click button or link) page works fine but when I reload the page it crashes. I cannot see where the error is, the console and source show just blank, this is the server message console message.</p>
  
  <pre><code>server: Entrypoint index [big] = index.js index.1af9d975ff74be4d27d9.hot-update.js index.c93bf08301ec20c0dc85.js.map index.c93bf08301ec20c0dc85.js.map
  server:    533 modules
  server: backend debug read session { csrfToken: '0ae87c36d850008df20b58941bf89072', id: 2 }
  server: backend debug {"data":{"currentUser":null}} &lt;= undefined
  server: backend debug {"data":{"currentUser":null}} &lt;= undefined
  server: backend debug read session {}
  server: backend error TypeError: Cannot convert undefined or null to object
  server:     at getPrototypeOf (&lt;anonymous&gt;)
  server:     at hoistNonReactStatics (/Users/apple/Desktop/dev/bethabit/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js:71:38)
  server:     at resolveComponent (/Users/apple/Desktop/dev/bethabit/node_modules/@loadable/component/dist/loadable.cjs.js:332:3)
  server:     at InnerLoadable.loadSync (/Users/apple/Desktop/dev/bethabit/node_modules/@loadable/component/dist/loadable.cjs.js:189:24)
  server:     at new InnerLoadable (/Users/apple/Desktop/dev/bethabit/node_modules/@loadable/component/dist/loadable.cjs.js:138:17)
  server:     at processChild (/Users/apple/Desktop/dev/bethabit/node_modules/react-dom/cjs/react-dom-server.node.development.js:3048:14)
  server:     at resolve (/Users/apple/Desktop/dev/bethabit/node_modules/react-dom/cjs/react-dom-server.node.development.js:3013:5)
  server:     at ReactDOMServerRenderer.render (/Users/apple/Desktop/dev/bethabit/node_modules/react-dom/cjs/react-dom-server.node.development.js:3436:22)
  server:     at ReactDOMServerRenderer.read (/Users/apple/Desktop/dev/bethabit/node_modules/react-dom/cjs/react-dom-server.node.development.js:3395:29)
  server:     at renderToStaticMarkup (/Users/apple/Desktop/dev/bethabit/node_modules/react-dom/cjs/react-dom-server.node.development.js:3969:27)
  server:     at process (/Users/apple/Desktop/dev/bethabit/node_modules/@apollo/react-ssr/lib/react-ssr.cjs.js:38:16)
  server:     at process._tickCallback (internal/process/next_tick.js:68:7)
  server: backend debug read session { id: 3 }
  server: backend debug loading &lt;= currentUser
  server: backend debug loading &lt;= currentUser
  server: backend debug loading &lt;= currentUser
  server: backend debug {"data":{"currentUser":{"id":3,"username":"canercak@gmail.com","role":"user","isActive":true,"email":"canercak@gmail.com","__typename":"User"}}} &lt;= currentUser
  server: backend debug {"data":{"currentUser":{"id":3,"username":"canercak@gmail.com","role":"user","isActive":true,"email":"canercak@gmail.com","__typename":"User"}}} &lt;= currentUser
  server: backend debug {"data":{"currentUser":{"id":3,"username":"canercak@gmail.com","role":"user","isActive":true,"email":"canercak@gmail.com","profile":{"firstName":"Caner","lastName":"Çakmak","fullName":"Caner Çakmak","__typename":"UserProfile"},"auth":{"certificate":null,"facebook":{"fbId":null,"displayName":null,"__typename":"FacebookAuth"},"google":{"googleId":"104801577244556473676","displayName":"Caner Çakmak","__typename":"GoogleAuth"},"github":null,"linkedin":null,"__typename":"UserAuth"},"__typename":"User"}}} &lt;= currentUser
  server: backend debug read session {}
  server: backend error TypeError: Cannot convert undefined or null to object
  server:     at getPrototypeOf (&lt;anonymous&gt;)
  server:     at hoistNonReactStatics (/Users/apple/Desktop/dev/bethabit/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js:71:38)
  server:     at resolveComponent (/Users/apple/Desktop/dev/bethabit/node_modules/@loadable/component/dist/loadable.cjs.js:332:3)
  server:     at InnerLoadable.loadSync (/Users/apple/Desktop/dev/bethabit/node_modules/@loadable/component/dist/loadable.cjs.js:189:24)
  server:     at new InnerLoadable (/Users/apple/Desktop/dev/bethabit/node_modules/@loadable/component/dist/loadable.cjs.js:138:17)
  server:     at processChild (/Users/apple/Desktop/dev/bethabit/node_modules/react-dom/cjs/react-dom-server.node.development.js:3048:14)
  server:     at resolve (/Users/apple/Desktop/dev/bethabit/node_modules/react-dom/cjs/react-dom-server.node.development.js:3013:5)
  server:     at ReactDOMServerRenderer.render (/Users/apple/Desktop/dev/bethabit/node_modules/react-dom/cjs/react-dom-server.node.development.js:3436:22)
  server:     at ReactDOMServerRenderer.read (/Users/apple/Desktop/dev/bethabit/node_modules/react-dom/cjs/react-dom-server.node.development.js:3395:29)
  server:     at renderToStaticMarkup (/Users/apple/Desktop/dev/bethabit/node_modules/react-dom/cjs/react-dom-server.node.development.js:3969:27)
  server:     at process (/Users/apple/Desktop/dev/bethabit/node_modules/@apollo/react-ssr/lib/react-ssr.cjs.js:38:16)
  server:     at process._tickCallback (internal/process/next_tick.js:68:7)
  </code></pre>
  
  <p>this is the code that runs. I tried removing currentuser, addhabit and many other things to just to understand where the error comes from. No results. Everything works fine if I enter the page through a link.</p>
  
  <p>HabitaddView.web.jsx</p>
  
  <pre><code>const HabitAddView = ({ addHabit, t, currentUser }) =&gt; {
    const renderMetaData = () =&gt; (
      &lt;Helmet
        title={`${settings.app.name} - ${t('habit.title')}`}
        meta={[
          {
            name: 'description',
            content: t('habit.meta')
          }
        ]}
      /&gt;
    );
    return (
      &lt;PageLayout&gt;
        {renderMetaData()}
        &lt;div className="row"&gt;
          &lt;div className="col-sm-12 padTop10"&gt;
            &lt;h2&gt;{t(`habit.label.create_new`)}&lt;/h2&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;HabitForm onSubmit={onSubmit(addHabit)} currentUser={currentUser} /&gt;
      &lt;/PageLayout&gt;
    );
  };
  </code></pre>
  
  <p>HabitForm.web.jsx</p>
  
  <pre><code>const HabitForm = ({ values, handleSubmit, setFieldValue, submitting, t  }) =&gt; {
    const [habitType, sethabitType] = useState('Fitness Habits');
    const [intervalText, setIntervalText] = useState(t('habit.field.interval'));
  
    const [habitActions, sethabitActions] = useState([]);
    const [habitFreqs, sethabitFreqs] = useState([]);
    const [habitDurations, sethabitDurations] = useState([]);
    const [habitIntervals, sethabitIntervals] = useState([]);
  
    const [showInterval, setshowInterval] = useState(true);
    const [showHabitDiv, setshowHabitDiv] = useState(false);
  
    const [habitActionDisabled, sethabitActionDisabled] = useState(true);
    let calendarComponentRef = React.createRef();
    let calendarWeekends = true;
    let [calendarEvents, setCalendarEvents] = useState([]);
  
    var timeZones = moment.tz.names();
  
    const handleHabitTypeChange = (type, value, setFieldValue) =&gt; {
      setFieldValue(type, value);
      resetValues();
      Object.values(settings.habits.list).map(object =&gt; {
        if (object.habit_type == value) {
          const _habitActions = [];
          Object.values(object.habit_actions).map(object2 =&gt; {
            _habitActions.push(object2.title);
          });
          sethabitType(value);
          sethabitActions(_habitActions);
          setshowHabitDiv(false);
          sethabitActionDisabled(false);
        }
      });
    };
  
    const updateIntervalText = worktype =&gt; {
      if (worktype === 5) {
        setIntervalText(t('habit.field.number'));
      } else if (worktype === 6 || worktype === 7) {
        setIntervalText(t('habit.field.proof'));
      } else {
        setIntervalText(t('habit.field.interval'));
      }
    };
  
    const handleHabitActionChange = (type, value, setFieldValue) =&gt; {
      const preparedValue = Array.isArray(value) ? value[0] : value;
      setFieldValue(type, preparedValue);
      const _habitFreqs = [];
      const _habitDurations = [];
      const _habitIntervals = [];
      resetValues();
      Object.values(settings.habits.list).map(object =&gt; {
        if (object.habit_type == habitType) {
          Object.values(object.habit_actions).map(object2 =&gt; {
            if (object2.title == preparedValue) {
              Object.values(object2.duration).map(object4 =&gt; {
                _habitDurations.push(object4);
              });
              Object.values(object2.interval).map(object5 =&gt; {
                _habitIntervals.push(object5);
              });
              sethabitFreqs(_habitFreqs);
              sethabitIntervals(_habitIntervals);
              sethabitDurations(_habitDurations);
              setshowHabitDiv(true);
              setFieldValue('timezone', moment.tz.guess());
              setFieldValue('worktype', object2.worktype);
              setFieldValue('description', object2.description);
              setFieldValue('misc', JSON.stringify(object2.misc));
              updateIntervalText(object2.worktype);
            }
          });
        }
      });
    };
  
    const handleValueChange = (type, value, setFieldValue) =&gt; {
      const preparedValue = value;
      setFieldValue(type, preparedValue);
      let timezone = values.timezone;
      let interval = values.interval;
      let duration = values.duration;
      if (type === 'timezone') {
        timezone = value;
      } else if (type === 'interval') {
        interval = value;
      } else if (type === 'duration') {
        duration = value;
      }
      updateCalendarEvents(values.habit_action, timezone, interval, duration);
    };
  
    const empty = e =&gt; {
      switch (e) {
        case '':
        case 0:
        case '0':
        case null:
        case false:
        case typeof this == 'undefined':
          return true;
        default:
          return false;
      }
    };
  
    const resetValues = () =&gt; {
      values.duration = '';
      values.interval = '';
      values.timezone = '';
      updateCalendarEvents(values.habit_action, values.timezone, values.interval, values.duration);
    };
  
    const updateCalendarEvents = (habit_action, timezone, interval, duration) =&gt; {
      setCalendarEvents([]);
      let events = [];
      if (!empty(timezone) &amp;&amp; !empty(interval) &amp;&amp; !empty(duration)) {
        var dur = JSON.parse(duration);
        var int = JSON.parse(interval);
        var times = dur.count;
        var counter = 0;
        for (var i = 0; i &lt; times; i++) {
          if (i % int.step === 0) {
            counter += 1;
            var obj = {
              title: values.habit_action + ' ' + int.title,
              start: moment
                .tz(values.timezone)
                .add(i + 1, 'days')
                .format(),
              allDay: true
            };
            let addObj = true;
            if (values.worktype === 7 &amp;&amp; i === 0) {
              addObj = false;
            }
            if (dur.weekdays === true &amp;&amp; (moment(obj.start).isoWeekday() === 6 || moment(obj.start).isoWeekday() === 7)) {
              addObj = false;
            }
            if (
              values.worktype === 7 &amp;&amp;
              counter &gt; 2 &amp;&amp;
              counter &lt; 10 &amp;&amp;
              (habit_action === 'Stay Alcohol Free' || (habit_action === 'Stay Nicotine Free' &amp;&amp; dur.count === 28))
            ) {
              obj.start = moment
                .tz(values.timezone)
                .add(i + (counter - 1), 'days')
                .format();
              true;
            }
            if (addObj) {
              events.push(obj);
            }
          }
        }
        if (habit_action === 'Stay Alcohol Free' &amp;&amp; dur.count === 28) {
          events.sort(function(a, b) {
            return moment(b.start) - moment(a.start);
          });
          events.shift();
          events.shift();
        }
        setCalendarEvents(events);
      }
    };
    if (settings.habits.list) {
      return (
        &lt;div className="row"&gt;
          &lt;div className="col-sm-5"&gt;
            &lt;div className="card"&gt;
              &lt;div className="card-body"&gt;
                &lt;Form name="habit" onSubmit={handleSubmit}&gt;
                  &lt;Field
                    name="habit_type"
                    component={RenderSelect}
                    type="select"
                    label={t('habit.field.habit_type')}
                    value={values.habit_type}
                    onChange={value =&gt; handleHabitTypeChange('habit_type', value, setFieldValue)}
                    cols={1}
                  &gt;
                    &lt;Option value={0}&gt;--Please Select--&lt;/Option&gt;
                    {Object.values(settings.habits.list).map((object, i) =&gt; {
                      return (
                        &lt;Option key={i} value={object.habit_type}&gt;
                          {object.habit_type}
                        &lt;/Option&gt;
                      );
                    })}
                  &lt;/Field&gt;
  </code></pre>
  
  <p>habitadd.jsx</p>
  
  <pre><code>class HabitAdd extends React.Component {
    static propTypes = {
      currentUser: PropTypes.object
    };
  
    constructor(props) {
      super(props);
      this.subscription = null;
      this.state = { options: [] };
    }
  
    render() {
      if ( this.props.currentUser) {
        return &lt;HabitAddView {...this.props} /&gt;;
      } else {
        return &lt;div&gt;&lt;/div&gt;;
      }
    }
  }
  
  export default compose(
    graphql(ADD_HABIT, {
      props: ({ ownProps: { history, navigation }, mutate }) =&gt; ({
        addHabit: async (
          habit_type,
          habit_action,
          duration,
          interval,
          timezone,
          description,
          worktype,
          misc,
          user_id
        ) =&gt; {
          let habitData = await mutate({
            variables: {
              input: {
                habit_type: habit_type,
                habit_action: habit_action,
                duration: duration,
                interval: interval,
                timezone: timezone,
                description: description,
                worktype: worktype,
                misc: misc,
                user_id: user_id
              }
            },
            optimisticResponse: {
              __typename: 'Mutation',
              addHabit: {
                __typename: 'Habit',
                id: null,
                habit_type: habit_type,
                habit_action: habit_action,
                duration: duration,
                interval: interval,
                timezone: timezone,
                description: description,
                worktype: worktype,
                misc: misc,
                user_id: user_id,
                days: [],
                bets: []
              }
            }
          });
  
          if (history) {
            window.location.href = window.location.origin + '/habit/' + habitData.data.addHabit.id;
          } else if (navigation) {
            return navigation.push('HabitEdit', { id: habitData.data.addHabit.id });
          }
        }
      })
    }),
    graphql(CURRENT_USER_QUERY, {
      props({ data: { error, currentUser } }) {
        if (error) throw new Error(error);
        return { currentUser };
      }
    })
  )(HabitAdd);
  </code></pre>
  
  <hr>
  
  <p>Thanks to Ace, I realized my mistake.
  Added this code line on habitAdd render method</p>
  
  <pre><code>render() {
      if ( this.props.currentUser) {
        return &lt;HabitAddView {...this.props} /&gt;;
      } else {
        return &lt;div&gt;&lt;/div&gt;;
      }
    }
  </code></pre>