Not able to use Transition Child in the Modal Component

[rahulMehndiratta2602]

I got the following error while using the <Transition.Child> tag .

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of TransitionChild

If i comment out the Transition.Child Element and then display the modal,it is being displayed.
I am using
"@headlessui/react": "^1.4.1", "tailwindcss": "^2.2.4" ,"next": "latest", and for state management I am using "recoil": "^0.5.2",

Here is my code

import { Dialog } from '@headlessui/react'
import { Transition } from '@headlessui/react'
import React, { Fragment } from 'react'
import { useRecoilState } from 'recoil'
import { modalState } from '../atoms/ModalState'


const Modal = () => {
    const [isOpen, setIsOpen] = useRecoilState(modalState);
    return (
        <Transition show={isOpen} as={Fragment}>
            <Dialog
                as="div"
                className=" top-16 z-10 fixed inset-x-0 bottom-0 overflow-y-auto bg-green-50"
                onClose={() => setIsOpen(false)}
            >
                <div className=" flex  items-end justify-center min-h-[800px] sm:min-h-screen pt-4 px-4 
                            pb-20 sm:block sm:p-0 bg-green-500">
                    <Transition.Child
                        as={Fragment}
                        enter="ease-out duration-300"
                        enterFrom="opacity-0 scale-95"
                        enterTo="opacity-100 scale-100"
                        leave="ease-in duration-200"
                        leaveFrom="opacity-100 scale-100"
                        leaveTo="opacity-0 scale-95"
                    >
                        <Dialog.overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />

                    </Transition.Child>
                </div>
            </Dialog>
        </Transition>
    )
}


export default Modal

[charlesoestergaard]

Did you find the answer for this?

[rahulMehndiratta2602]

Yes

…

On Wed, May 18, 2022, 15:21 Charlie Østergaard ***@***.***> wrote: Did you find the answer for this? — Reply to this email directly, view it on GitHub <#931 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APCH72ZPZZQWBC622TUGKDLVKS4T3ANCNFSM5ICYXHJQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- The information contained in this electronic communication is intended solely for the individual(s) or entity to which it is addressed. It may contain proprietary, confidential and/or legally privileged information. Any review, retransmission, dissemination, printing, copying or other use of, or taking any action in reliance on the contents of this information by person(s) or entities other than the intended recipient is strictly prohibited and may be unlawful. If you have received this communication in error, please notify us by responding to this email or telephone and immediately and permanently delete all copies of this message and any attachments from your system(s). The contents of this message do not necessarily represent the views or policies of BITS Pilani.

[charlesoestergaard]

Can you share please? I have the same problem.

[ynnelson]

Would really much appreciate to know the solve as well.

[charlesoestergaard]

Would really much appreciate to know the solve as well.

This fixed it for me :)
(Update the libary)
npm install @headlessui/react@latest

[pagarevijayy]

the update worked, thanks!