Prop id did not match between server and client

• I have searched the issues of this repository and believe that this is not a duplicate.

This may be considered a duplicate of #1959 but that issue was closed without resolution. Adding an id prop can resolve this issue, but leads to the issue described in #1099 to occur instead, and in any case if the id prop is not outlined as something required for proper SSR we should handle it internally in this library.

Reproduction link

NOTE: this will not work without the component being server rendered, so JSFiddle isn’t going to show a reproduction.

https://jsfiddle.net/alidingling/9km41z5z/

Steps to reproduce

Hard refresh any page using a rechart chart (e.g. RadialBarChart or ScatterChart) that is server rendered.

What is expected?

id props on elements within chart components should match between server and client renders.

This issue occurs when you do not explicitly set an id prop on your chart component (aside: id prop is not expected based on TS typing, but it does appear that if one is passed in it will be used to generate the chart id). If you do pass an id prop, you get the issue outlined in #1099.

What is actually happening?

id props mismatch between server and client renders. Get a console warning something like

Warning: Prop `id` did not match. Server: "recharts16-clip" Client: "recharts1-clip".

If you do provide your own id prop, the warning switches to

Warning: Expected server HTML to contain a matching <g> in <g>.

Which I haven’t figure out exactly why given that the library passes the string id "recharts" if no id prop is provided.

My assumption for why this is happening is because it’s currently hard to generate unique but isomorphic ID’s for React (there is an open React RFC for this exact issue). Solving this issue will become even more challenging with the release of React concurrent mode with suspense boundaries. Rechart’s current implementation uses a global idCounter, which is a commonly proposed solution, but it doesn’t work as one would expect.

Environment	Info
Recharts	v1.8.5
React	16.13.1
System	macOS 10.15.4
Browser	Google Chrome 85.0.4183.83

[DeBraid]

To remove the error, you can use nextjs dynamic import, per https://github.com/vercel/next.js/issues/12863#issuecomment-628660240

Copied from link above:

import dynamic from 'next/dynamic'

// components/MyChart.js contains the recharts chart
const MyChart = dynamic(
    () => import('../components/MyChart'),
    { ssr: false }
  )

export default function Example() {
  return <MyChart />;
}

[nicholasgriffintn]

Great news anyone who still has this problem!

I found this pull here while I was looking around:

https://github.com/recharts/recharts/pull/959

This actually resolves the issue without using dynamic, simply pass an id to the main chart component.

<PieChart id="test" width={500} height={300} data={data}>
...
</PieChart>

Means you can use it server-side, worked for me. The pull only mentions pie though, unsure if it was done for all charts.