search

themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.9k stars 425 forks source link

lib: hydration issue with modal component #350

Closed chankruze closed 2 years ago

chankruze commented 2 years ago

I have encountered the hydration issue with flowbite-react modal. There may(not) issues with other components but as of now I have tested only with the Modal.

I followed the official docs: https://flowbite-react.com/modal and created a repo for the demonstration. I have also made a video about the issue on the YouTube with me explaining the actual problem. I also did a comparison with the react-modal in the video.

Repo: https://github.com/chankruze/flowbite-hydration-demo. Video: https://youtu.be/e05LgWYl5Nc

I hope we can solve this issue by using react portal or mounting the modal inside the project app div. for example div#root or div#__next, instead of doing below thing.

https://github.com/themesberg/flowbite-react/blob/0dd10d339a17961743c6d8a4ceb5c8e06677c0df/src/lib/components/Modal/index.tsx#L33

https://github.com/themesberg/flowbite-react/blob/0dd10d339a17961743c6d8a4ceb5c8e06677c0df/src/lib/helpers/window-exists.ts#L1

Or maybe the window check above is causing the hydration error as per the next-js docs (https://nextjs.org/docs/messages/react-hydration-error).

I maybe wrong, if so, please pardon me and point me in the right direction.

chankruze commented 2 years ago

I check the code and found that we are also using portal to create a div and append the modal to that. It seems like that window check is causing the issue. I am experimenting and will update here soon.