segmentio / evergreen

🌲 Evergreen React UI Framework by Segment
https://evergreen.segment.com
MIT License
12.39k stars 832 forks source link

fix: fixed nextjs/react hydration error when using portals #1517

Closed oxala closed 2 years ago

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

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...

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!