TypeScript errors for ReactNode after migration to Create React App v5

Question

After migrating to Create React App version 5, I have errors like the one below:

TS2786: 'OutsideClickHandler' cannot be used as a JSX component.
  Its instance type 'OutsideClickHandler' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'ReactNode' is not assignable to type 'false | Element | null'.
        Type 'undefined' is not assignable to type 'false | Element | null'.
    134 |       onClick={handleMouseOver}
    135 |     >
  > 136 |       <OutsideClickHandler

It's mainly for external libraries. For the library above the declaration is:

import * as React from "react";

export interface DefaultProps {
    disabled: boolean;
    useCapture: boolean;
    display: "block" | "flex" | "inline" | "inline-block" | "contents";
}

export interface Props extends Partial<DefaultProps> {
    children: React.ReactNode;
    onOutsideClick: (e: MouseEvent) => void;
}

export default class OutsideClickHandler extends React.Component<Props> {
    static defaultProps: DefaultProps;
}

I have similar problems with Helmet (react-helmet-async), TimeAgo (react-timeago), CopyToClipboard (react-copy-to-clipboard).

Has anyone encountered this problem before?

Answer 1

I had the same issue, and upgrading @types/react to 18.0.2 fixed the problem for me.

Specifically, I needed to update:

    "@types/react": "18.0.2",
    "@types/react-dom": "18.0.0",
    "react-i18next": "11.16.5",
    "react-helmet-async": "1.3.0",