Repository navigation
'ReactModal' cannot be used as a JSX component. #1054
Description
With React v19
Summary:
Type error when using ReactModal as a JSX component.
Steps to reproduce:
- Import
ReactModalfromreact-modal. - Use
ReactModalin a JSX component. - 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>
);
}Reacted by Roman Suturin, Gabriel Ribeiro, Takao, Barun Prasad, Kerem-yhsong, yusuke-fukuhara, Jonatan Plata, Ryo Okamoto, hsjang and Sergio Lepore
Activity
featherbread commentedon Jan 6, 2025
I think the issue is that your
@types/react-modalinstallation has its own copy of@types/reactat a different major version from the rest of your project. One clue is the import path in this line of the error:node_modules/@types/react-modal/node_modules/@types/reactpoints at the incompatible copy of the React types, while theReact.ReactNodetype at the end of that message is presumably undernode_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 inpackage.json, or cleaning up youryarn.lockand 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-modaldefines that dependency so loosely in itspackage.json. I'm not sure if there's a reason it was set up that way instead of as a peer dependency.)[romdata] change to modal...