fix: normalize SVG path precision to prevent hydration errors - #3087
Open
ErfanBagheri404 wants to merge 1 commit into
Open
fix: normalize SVG path precision to prevent hydration errors#3087ErfanBagheri404 wants to merge 1 commit into
ErfanBagheri404 wants to merge 1 commit into
Conversation
Fixes FormidableLabs#2941 d3-shape emits coordinates like 252.50000000000003 on some platforms and 252.5 on others, so the serialized `d` attribute differs between server and client renders. In Next.js this triggers React hydration mismatch errors for VictoryLine and VictoryArea charts. Add roundPathString, which rounds every numeric coordinate in a path string to 3 decimal places (integers left untouched), and apply it to the line/area path generation in Curve and Area.
|
|
@ErfanBagheri404 is attempting to deploy a commit to the Nearform Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #2941
d3-shape emits coordinates like 252.50000000000003 on some platforms and 252.5 on others, so the serialized d attribute differs between server and client. In Next.js this triggers React hydration mismatch errors for VictoryLine and VictoryArea.
Add roundPathString which rounds numeric coordinates in path strings to 3 decimals, and apply it to Curve and Area path generation.
The clipId portion was addressed in #2973; this resolves the remaining floating-point portion.