Type error: JSX element type '{} | null | undefined' is not a constructor function for JSX elements

Question

I have a React component called HandleQuery that handles the results of an Apollo GraphQL query:

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) => {
    if (loading) {
        return <CenteredMessage>Loading...</CenteredMessage>;
    }

    if (error) {
        return <CenteredMessage>{error.message}</CenteredMessage>;
    }

    return children;
};

When this component is used in another component it does not compile:

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 (
            <!-- THIS LINE PRODUCES A COMPILER ERROR -->
            <HandleQuery loading={loading} error={error}>
                <AuthorsPanel data={data} />
            </HandleQuery>
        );
    }
}

The use of HandleQuery above produces the following error:

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

What does this mean and how can I get rid of it?

Update

Converting AuthorsContainer to a function component does not eliminate the error:

export const AuthorsContainer = () => {
    const { loading, error, data } = useQuery(GET_AUTHORS);
    return (
        <HandleQuery loading={loading} error={error}>
            <AuthorsPanel data={data} />
        </HandleQuery>
    );
};

Update 2 Implemented suggestion from @FredyC:

import React from 'react';

import { CenteredMessage } from './centered-message';

export interface HandleQueryProps {
    loading: boolean;
    error?: Error;
}

export const HandleQuery: React.FC<HandleQueryProps> = ({
    loading,
    error,
    children
}) => {
    if (loading) {
        return <CenteredMessage>Loading...</CenteredMessage>;
    }

    if (error) {
        return <CenteredMessage>{error.message}</CenteredMessage>;
    }

    return children;
};

Now the error on the container component has gone away, but a new compiler error has popped up on the HandleQuery component:

Type error: Type '({ loading, error, children }: PropsWithChildren<HandleQueryProps>) => {} | null | undefined' is not assignable to type 'FunctionComponent<HandleQueryProps>'.
  Type '{} | null | undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.
    Type 'undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.  TS2322

Start console.log()ing everything. Find out what is null. From what it seems like HandleQuery is undefined. Perhaps you meant import { HandleQuery } from '../'? — Goodbye StackExchange
@FrankerZ - This is a compile-time error (TSnnnn is a TypeScript compiler error code), not a runtime error. (The OP also conveniently said "this line produces a compiler error" although in his case, he used all caps.) — T.J. Crowder
Can hooks be used in classes? I thought they were functional component only? — rrd
HandleQuery is imported correctly. It is defined in ../index.tsx — Naresh
Just read the Hooks FAQ. It says "You can’t use Hooks inside of a class component". Let me try to convert that to a function component. — Naresh

FredyC FredyC · Accepted Answer · 2019-02-27T15:19:47

There is a long term issue regarding ReactNode. I don't understand specifics, but it's something hard-wired in TypeScript itself and is being worked on.

Either way, a solution should be easy. Don't use ReactNode with functional components :) The children prop is implicitly included in React.FC type.

The same problem goes with returning children. It can be either overcome by wrapping into <React.Fragment> or <div> if you prefer, but since it's just a type error, you can convince TypeScript that you know what you are doing :)

import React, { ReactNode } from 'react';

import { CenteredMessage } from './centered-message';

export interface HandleQueryProps {
    loading: boolean,
    error?: Error,
}

export const HandleQuery: React.FC<HandleQueryProps> = ({ loading, error, children }) => {
    if (loading) {
        return <CenteredMessage>Loading...</CenteredMessage>;
    }

    if (error) {
        return <CenteredMessage>{error.message}</CenteredMessage>;
    }

    return children as ReactElement<any>;
};

Type error: JSX element type '{} | null | undefined' is not a constructor function for JSX elements

4 Answers