search

FormidableLabs / victory

A collection of composable React components for building interactive data visualizations
http://commerce.nearform.com/open-source/victory/
Other
11.02k stars 524 forks source link

Hydration error using VictoryLine on NextJS 15. #2941

Open JohnFoster44 opened 3 weeks ago

JohnFoster44 commented 3 weeks ago

Is there an existing issue for this?

Code of Conduct

Victory version

^37.3.0

Code Sandbox link

No response

Bug report

I am using VictoryLine in a client component, and calling it on a server-side page. On refresh of the page I am getting a hydration error: 

+clipPath="url(#victory-clip-8)"
-clipPath="url(#victory-clip-4)"
+id="victory-clip-8"
-id="victory-clip-4"```

Just using the example data from the docs. 

VictoryLine is in a client component, that is imported to the page.

Steps to reproduce

No response

Expected behavior

No response

Actual behavior

No response

Environment

- Device: Mac M2 Pro 
- OS: MacOS
- Node: 20.11.0
- npm: 37.3.0
JohnFoster44 commented 2 weeks ago

Found the solution: if the generated id is not working out for you, you can set a custom one.

https://commerce.nearform.com/open-source/victory/docs/api/victory-clip-container#clipid

import { VictoryChart, VictoryLine, VictoryClipContainer } from "victory";

<VictoryChart width={640} maxDomain={{ y: 200 }}>
      <VictoryLine
          style={{data: { stroke: "#198c53" }}}
          data={data}
          interpolation={"natural"}
          groupComponent={<VictoryClipContainer clipId={"custom-id"} />}
      />
</VictoryChart>

Fixable but would be great if its looked into!

coston commented 1 week ago

I'm looking into this now...

image
coston commented 1 week ago

https://codesandbox.io/p/devbox/lg7lf4

coston commented 1 week ago

The best fix is to use React 18+'s useId() instead of Lodash's uniqueId() for generating clipId. It works great. Unfortunately, this would break compatibility with React 16, which Victory supports.

coston commented 1 week ago

Very recently there have been other PRs that revert useId to maintain backwards compatibility. https://github.com/FormidableLabs/victory/pull/2916