Refine•2y ago

hydration error with antd modal

I am using nextjs13. I get a hydration error the moment theres a modal on the page. The subsequent render removes the error.

<Modal open={true}>
        <p>yo</p>
      </Modal>

<Modal open={true}>
        <p>yo</p>
      </Modal>

kapa.ai•12/22/23, 3:40 PM

Hi @synisme. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•12/22/23, 3:41 PM

----------------------
Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not contain specific information about a hydration error with Ant Design's Modal component in a Next.js application.

However, Refine provides a hook to manage an Ant Design Modal component. You can use the

show

show

and props to control the modal's visibility. Here's an example from the documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal):

In this example, the

show

show

function is used to open the modal. You might want to try this approach and see if it resolves your issue. If the problem persists, it could be related to a specific issue with Next.js or your application's configuration.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•12/22/23, 3:41 PM

@183085423604662273 kapa.ai is still learning and improving, please let us know how it did by reacting below