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

[featherbread]

I think the issue is that your @types/react-modal installation has its own copy of @types/react at a different major version from the rest of your project. One clue is the import path in this line of the error:

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'.

node_modules/@types/react-modal/node_modules/@types/react points at the incompatible copy of the React types, while the React.ReactNode type at the end of that message is presumably under node_modules/@types/react.

DefinitelyTyped/DefinitelyTyped#59765 (comment) is the most helpful comment I've seen to explain why this happens and suggest possible fixes for Yarn users: adding a "resolutions" entry in package.json, or cleaning up your yarn.lock and reinstalling.

(I'm not sure if you're actually using Yarn, but it's the only package manager I've seen mentioned in similar GitHub issues, and I couldn't reproduce this when I did a React 18 -> 19 upgrade with npm. To be clear, Yarn's behavior is correct given how @types/react-modal defines that dependency so loosely in its package.json. I'm not sure if there's a reason it was set up that way instead of as a peer dependency.)