title: Type error: JSX element type '{} | null | undefined' is not a constructor function for JSX elements
body: <p>I have a React component called <code>HandleQuery</code> that handles the results of an Apollo GraphQL query:</p>
  
  <pre><code>import React, { ReactNode } from 'react';
  
  import { CenteredMessage } from './centered-message';
  
  export interface HandleQueryProps {
      loading: boolean,
      error?: Error,
      children: ReactNode
  }
  
  export const HandleQuery = ({ loading, error, children }: HandleQueryProps) =&gt; {
      if (loading) {
          return &lt;CenteredMessage&gt;Loading...&lt;/CenteredMessage&gt;;
      }
  
      if (error) {
          return &lt;CenteredMessage&gt;{error.message}&lt;/CenteredMessage&gt;;
      }
  
      return children;
  };
  </code></pre>
  
  <p>When this component is used in another component it does not compile:</p>
  
  <pre><code>import React from 'react';
  
  import { useQuery } from 'react-apollo-hooks';
  import gql from 'graphql-tag';
  import { HandleQuery } from '..';
  import { MutationType } from '../../graphql-types';
  import { AuthorsPanel } from './authors-panel';
  import { GET_AUTHORS } from './authors-queries';
  import { AuthorMutated } from './__generated__/AuthorMutated';
  
  export class AuthorsContainer extends React.Component {
      render() {
          const { loading, error, data } = useQuery(GET_AUTHORS);
          return (
              &lt;!-- THIS LINE PRODUCES A COMPILER ERROR --&gt;
              &lt;HandleQuery loading={loading} error={error}&gt;
                  &lt;AuthorsPanel data={data} /&gt;
              &lt;/HandleQuery&gt;
          );
      }
  }
  </code></pre>
  
  <p>The use of <code>HandleQuery</code> above produces the following error:</p>
  
  <blockquote>
    <p>Type error: JSX element type '{} | null | undefined' is not a constructor function for JSX elements.
      Type 'undefined' is not assignable to type 'Element | null'.  TS2605</p>
  </blockquote>
  
  <p>What does this mean and how can I get rid of it?</p>
  
  <p><strong>Update</strong></p>
  
  <p>Converting AuthorsContainer to a function component does not eliminate the error:</p>
  
  <pre><code>export const AuthorsContainer = () =&gt; {
      const { loading, error, data } = useQuery(GET_AUTHORS);
      return (
          &lt;HandleQuery loading={loading} error={error}&gt;
              &lt;AuthorsPanel data={data} /&gt;
          &lt;/HandleQuery&gt;
      );
  };
  </code></pre>
  
  <p><strong>Update 2</strong>
  Implemented suggestion from @FredyC:</p>
  
  <pre><code>import React from 'react';
  
  import { CenteredMessage } from './centered-message';
  
  export interface HandleQueryProps {
      loading: boolean;
      error?: Error;
  }
  
  export const HandleQuery: React.FC&lt;HandleQueryProps&gt; = ({
      loading,
      error,
      children
  }) =&gt; {
      if (loading) {
          return &lt;CenteredMessage&gt;Loading...&lt;/CenteredMessage&gt;;
      }
  
      if (error) {
          return &lt;CenteredMessage&gt;{error.message}&lt;/CenteredMessage&gt;;
      }
  
      return children;
  };
  </code></pre>
  
  <p>Now the error on the container component has gone away, but a new compiler error has popped up on the <code>HandleQuery</code> component:</p>
  
  <pre><code>Type error: Type '({ loading, error, children }: PropsWithChildren&lt;HandleQueryProps&gt;) =&gt; {} | null | undefined' is not assignable to type 'FunctionComponent&lt;HandleQueryProps&gt;'.
    Type '{} | null | undefined' is not assignable to type 'ReactElement&lt;any, string | ((props: any) =&gt; ReactElement&lt;any, string | ... | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null) | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null'.
      Type 'undefined' is not assignable to type 'ReactElement&lt;any, string | ((props: any) =&gt; ReactElement&lt;any, string | ... | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null) | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null'.  TS2322
  </code></pre>