fix: fixed nextjs/react hydration error when using portals

oxala commented 2 years ago

Overview Currently, while using nextjs, if the page will have an evergreen component which uses portal that is visible (isShown={true}), during initial render (page load) react will complain about failed hydration:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

This PR is my attempt to change the smallest amount code and following these resources:

Side note: This doesn't actually render portal content on the server-side. Portal initiation happens on the component mounts on client. As far as I googled, there is no solution to have portals properly rendering on server-side. Some modules showcasing the idea, like this module. But they are not production ready, as they can leak portals across concurrent requests.

Documentation

[ ] Updated Typescript types and/or component PropTypes
[ ] Added / modified component docs
[ ] Added / modified Storybook stories

netlify[bot] commented 2 years ago

Deploy Preview for evergreen-storybook ready!

Name	Link
Latest commit	5f84b6445bd5c21c61d8ace58fda99bca02db344
Latest deploy log	https://app.netlify.com/sites/evergreen-storybook/deploys/633598023a3bc20008597cb1
Deploy Preview	https://deploy-preview-1517--evergreen-storybook.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

brandongregoryscott commented 2 years ago

Pulled it down w/ your example repo and it seems to solve the issue. Going to do a little more smoke testing with this change before merging it in, but it makes sense based on those discussions linked. Thanks for fixing this up!

segmentio / evergreen