title: Uncaught ReferenceError: React is not defined but no issue in component
body: <p>wassup Folks,</p>
  <p>I got the following error from my component called &quot;SearchReactTableContainer&quot;. I looked inside but everything looks well to many. Any Ideas how to fix this? I looked into the network conditions and the needed data from my resulting query is provided without any issues to my frontend.</p>
  <p>SearchReactTableContainer.js</p>
  <pre><code>import React, { Component, Fragment } from &quot;react&quot;;
  import { has, isNil } from &quot;ramda&quot;;
  
  import CockpitSearchInput from &quot;@components/SearchInput&quot;;
  import SearchReactTable from &quot;@cockpitComponents/SearchReactTable&quot;;
  import {
    MY_CASES_FILTER_KEY,
    UNASSIGNED_FILTER_KEY
  } from &quot;@modules/CaseManager/CaseManagerDashboard/constants&quot;;
  import { Col, Row } from &quot;antd&quot;;
  
  // TODO: TO BE REMOVED
  const pagesCount = 3855;
  
  export default class SearchReactTableContainer extends Component {
    constructor(props) {
      super(props);
      const { limit, searchValue } = this.props;
      const orMyCases = localStorage.getItem(MY_CASES_FILTER_KEY);
      const orUnassignedCases = localStorage.getItem(UNASSIGNED_FILTER_KEY);
      this.state = {
        loading: false,
        searchValue: searchValue || &quot;&quot;,
        data: [],
        pageSize: limit,
        pagesCount,
        orMyCases: this.parseNonNullValue(orMyCases),
        orUnassignedCases: this.parseNonNullValue(orUnassignedCases)
      };
  
      this.triggerFetchMore = this.triggerFetchMore.bind(this);
    }
  
    parseNonNullValue(value) {
      try {
        return !isNil(value) ? JSON.parse(value) : true;
      } catch (err) {
        console.error(err);
        return false;
      }
    }
  
    async fetchMoreFromGraphql(fetchMore, variables, tableKey) {
      return await fetchMore({
        variables,
        updateQuery: (previousResult, { fetchMoreResult }) =&gt; {
          if (!fetchMoreResult || !previousResult) return previousResult;
          if (!(tableKey in previousResult)) {
            return [];
          }
          return {
            ...previousResult,
            ...fetchMoreResult[tableKey]
          };
        }
      });
    }
  
    async onFetchDataHandler(state) {
      const { page, pageSize, sorted, filtered } = state;
      const { tableKey, fetchMore } = this.props;
      const { searchValue, orMyCases, orUnassignedCases } = this.state;
      this.changeTableLoadingState();
      const response = await this.fetchMoreFromGraphql(
        fetchMore,
        {
          searchValue,
          offset: page * pageSize,
          limit: pageSize,
          page,
          pageSize,
          sorted,
          filtered,
          filters: {
            orMyCases,
            orUnassignedCases
          }
        },
        tableKey
      );
      let { data } = response;
      const pagesCount =
        searchValue.length === 0
          ? has(&quot;totalCount&quot;, data[tableKey])
          ? Math.ceil(data[tableKey].totalCount / pageSize)
          : has(&quot;items&quot;, data[tableKey])
            ? Math.ceil(data[tableKey].items.length / pageSize)
            : Math.ceil(data[tableKey].length / pageSize)
          : this.state.pagesCount;
      this.setState({
        ...this.state,
        loading: false,
        data: data[tableKey].items ? data[tableKey].items : data[tableKey],
        pageIndex: page,
        pageSize,
        pagesCount
      });
    }
  
    async triggerFetchMore(searchValue = &quot;&quot;) {
      const { tableKey, fetchMore, tableName } = this.props;
      const { orMyCases, orUnassignedCases } = this.state;
      this.changeTableLoadingState();
      const variables = {
        searchValue,
        offset: 0,
        limit: this.state.pageSize,
        filters: {
          orMyCases,
          orUnassignedCases
        }
      };
      const response = await this.fetchMoreFromGraphql(fetchMore, variables, tableKey);
      const { data } = response;
      try {
        await this.setState(prevState =&gt; {
          const { pageSize } = prevState;
          const pagesCount =
            searchValue.length === 0
              ? has(&quot;totalCount&quot;, data[tableKey])
              ? Math.ceil(data[tableKey].totalCount / pageSize)
              : has(&quot;items&quot;, data[tableKey])
                ? Math.ceil(data[tableKey].items.length / pageSize)
                : Math.ceil(data[tableKey].length / pageSize)
              : this.state.pagesCount;
          prevState = {
            ...prevState,
            loading: false,
            data: data[tableKey].items ? data[tableKey].items : data[tableKey],
            searchValue,
            pagesCount
          };
          return prevState;
        });
        localStorage.setItem(`${tableName}.searchValue`, searchValue);
      } catch (err) {
        console.log(err);
      }
    }
  
    changeTableLoadingState() {
      this.setState({ loading: !this.state.loading });
    }
  
    render() {
      const {
        columns,
        dataFormatter,
        search = true,
        defaultSorted,
        filterBlock
      } = this.props;
      const { data, pagesCount, pagesSize, loading, searchValue } = this.state;
      let formattedData = data;
      if (typeof dataFormatter === &quot;function&quot;) {
        formattedData = dataFormatter(data);
      }
      return (
        &lt;Fragment&gt;
          {search &amp;&amp; (
            &lt;Row&gt;
              &lt;Col span={6}&gt;
                &lt;CockpitSearchInput
                  onChange={this.triggerFetchMore}
                  initialValue={searchValue}
                /&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          )}
          {!isNil(filterBlock) &amp;&amp; filterBlock(this)}
          &lt;SearchReactTable
            {...this.props}
            manual
            data={formattedData}
            columns={columns}
            loading={loading}
            // Request new data when things change
            onFetchData={(state, instance) =&gt; this.onFetchDataHandler(state, instance)}
            pages={pagesCount} // Display the total number of pages
            pageSizeOptions={[5, 10, 20, 25, 50, 100]}
            defaultPageSize={pagesSize}
            className=&quot;table table-striped table-bordered table-hover&quot;
            defaultSorted={defaultSorted}
          /&gt;
        &lt;/Fragment&gt;
      );
    }
  }
  </code></pre>
  <p>I'll add a screenshot showing me the actual issue in the developer tab.</p>
  <p><a href="https://i.stack.imgur.com/rUdSh.png" rel="nofollow noreferrer">Component that uses SearchReactTable</a></p>