'ReactModal' cannot be used as a JSX component.

[nodirbekrajaboff]

With React v19

Summary:

Type error when using ReactModal as a JSX component.

Steps to reproduce:

1. Import ReactModal from react-modal.
2. Use ReactModal in a JSX component.
3. Compile the code.

Expected behavior:

The ReactModal component should render without type errors.

Additional notes:

This is the TypeScript error message:

'ReactModal' cannot be used as a JSX component.
  Its type 'typeof ReactModal' is not a valid JSX element type.
    Type 'typeof ReactModal' is not assignable to type 'new (props: any) => Component<any, any, any>'.
      Construct signature return types 'ReactModal' and 'Component<any, any, any>' are incompatible.
        The types returned by 'render()' are incompatible between these types.
          Type 'import("/Users/nodirbekrajaboff/Desktop/projects/digital-aggregator/node_modules/@types/react-modal/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
            Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
              Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2786)

Additional TypeScript error messages:

Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
  Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2322)
index.d.ts(387, 9): 'children' is declared here.
index.d.ts(2156, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

For: {contentElement}

No overload matches this call.
  Overload 1 of 2, '(props: Props): ReactModal', gave the following error.
    Type 'React.ReactNode' is not assignable to type 'import("/Users/nodirbekrajaboff/Desktop/projects/digital-aggregator/node_modules/@types/react-modal/node_modules/@types/react/index").ReactNode'.
      Type 'bigint' is not assignable to type 'ReactNode'.
  Overload 2 of 2, '(props: Props, context: any): ReactModal', gave the following error.
    Type 'React.ReactNode' is not assignable to type 'import("/Users/nodirbekrajaboff/Desktop/projects/digital-aggregator/node_modules/@types/react-modal/node_modules/@types/react/index").ReactNode'.
      Type 'bigint' is not assignable to type 'ReactNode'.ts(2769)
index.d.ts(41, 9): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactModal> & Readonly<Props>'
index.d.ts(41, 9): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactModal> & Readonly<Props>'

For: {children}

Codes:

"use client";

import { cn } from "@/lib/utils";
import { motion, AnimatePresence } from "framer-motion";
import React from "react";
import ReactModal from "react-modal";

type ModalProps = {
  modalIsOpen: boolean;
  closeModal: () => void;
  children: React.ReactNode;
  className?: string;
};

ReactModal.setAppElement("#app");

export default function Modal({
  children,
  closeModal,
  modalIsOpen,
  className,
}: ModalProps) {
  return (
    <ReactModal
      onRequestClose={closeModal}
      className={cn(
        "absolute inset-0 mx-auto h-full w-full overflow-auto rounded-lg bg-none p-0 outline-none rem:max-w-[500px] md:inset-10 md:h-auto md:w-auto",
        className,
      )}
      bodyOpenClassName="overflow-hidden"
      isOpen={modalIsOpen}
      closeTimeoutMS={300}
      overlayClassName="fixed inset-0 z-[50] bg-black/50 p-0 transition-colors"
      overlayElement={({ className, ...props }, contentElement) => (
        <>
          <AnimatePresence mode="wait">
            {modalIsOpen ? (
              <motion.div
                initial={{
                  opacity: 0,
                }}
                animate={{
                  opacity: 1,
                }}
                exit={{
                  opacity: 0,
                  transition: {
                    duration: 0.3,
                  },
                }}
                data-a="1"
                className={className}
              >
                <div className="absolute inset-0 h-full w-full" {...props}>
                  {contentElement}
                </div>
              </motion.div>
            ) : null}
          </AnimatePresence>
        </>
      )}
      shouldCloseOnOverlayClick={true}
      shouldCloseOnEsc={true}
    >
      {children}
    </ReactModal>
  );
}