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

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>;};

At this case, it can be more easy simply define children of type ReactElement if I am not obviating something.

export interface HandleQueryProps {    loading: boolean,    error?: ApolloError,    children: ReactElement}

Switching ReactNode to JSX.Element resolves the type issue.

According to the related github issue on React, using JSX.Element instead of ReactNode is suggested for functional components.

You can check the details of JSX.Element vs ReactNode in typescript-cheatsheets/react page.