Search code examples
reactjsvercelmodal-windowchakra-ui

Deploing React site with ChackraUI on Vercel and modal window stopped showing


I have a page with a modal window. In development mode, it opens. But when I upload my React App to vercel, then the screen just darkens there, and the modal window does not appear, but all the window controls work. Who faced the same problem?

const { isOpen, onOpen, onClose } = useDisclosure()
  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>

      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Lorem count={2} />
          </ModalBody>

          <ModalFooter>
            <Button colorScheme="blue" mr={3} onClick={onClose}>
              Close
            </Button>
            <Button variant="ghost">Secondary Action</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  )

Solution

  • I was able to fix this by upgrading the "framer-motion": version -> "framer-motion": "^4.1.16".