Prop id did not match between server and client

[indiesquidge]

• 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

[cmmartin]

Why is an autogenerated id required at all? It makes this library incompatible with Next.js. I can't think of any reason it needs to exist

[DeBraid]

To remove the error, you can use nextjs dynamic import, per vercel/next.js#12863 (comment)

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:

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

[rettgerst]

The pull only mentions pie though, unsure if it was done for all charts.

worked for me with an area chart as well.

[akamfoad]

Disabling animation makes the mismatch between Server HTML and Hydrated client code go away

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

try adding isAnimationActive={false}, in my case toRadialBar component, others accept it too.

The question is how to solve that issue?

[rayhantr]

Disabling animation makes the mismatch between Server HTML and Hydrated client code go away

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

try adding isAnimationActive={false}, in my case toRadialBar component, others accept it too.

The question is how to solve that issue?

For me this worked! Using version 2.1.12. What a weird error!

[akamfoad]

The error is that, because of the animation changes the paths or other props of the SVGs used to render the charts would change between the render on the server, and the render on the client.

Apart from providing your id to the chart, looks like the best way of both worlds would be disabling animations on the server, and first render on the client. Then, trigger the animation after first render (aka hydration).

As:

const [shouldAnimate, setShouldAnimate] = useState(false)

useEffect(()=>{
  setShouldAnimate(true)
},[])

[fibo]

Also had this issue on Next JS. I solved it using an useIsServerSide hook:

import { FC, useEffect, useState } from "react";
import { LineChart, Line, Tooltip } from "recharts";

const data1 = [
  { name: "2022-01-01", v: 10 },
  { name: "2022-01-02", v: 11 },
  { name: "2022-01-03", v: 14 },
  { name: "2022-01-04", v: 18 },
  { name: "2022-01-05", v: 17 },
  { name: "2022-01-06", v: 15 },
  { name: "2022-01-07", v: 12 },
];

export const useIsServerSide = () => {
  const [isServerSide, setIsServerSide] = useState(true);

  useEffect(() => {
    setIsServerSide(false);
  }, [setIsServerSide]);

  return isServerSide;
};

export const Charts: FC = () => {
  const isServerSide = useIsServerSide();
  if (isServerSide) return null;
  return (
    <div>
      <LineChart id="line1" width={400} height={200} data={data1}>
        <Line type="monotone" dataKey="v" stroke="#8884d8" />
        <Tooltip />
      </LineChart>
    </div>
  );

[nikhilvneoito]

Thank you, the best answer !

[cmmartin]

Only rendering the chart client side isn't a great solution. There's no reason SVG charts can't be rendered in Node.js. A real solution would still show a chart with javascript disabled. Otherwise, what's the point of rendering server side at all

[akamfoad]

@cmmartin Actually this happens only with ResponsiveContainer, if you render a chart with its dimensions, you don't even need JavaScript on the page for the chart to be rendered.

For example:

1. This app is rendered with ResponsiveContainer, it needs JavaScript on the app, if you disable the app (comment out root.jsx > <Scripts /> component, it'll not appear at all -> https://stackblitz.com/edit/remix-run-remix-f1bglw
2. This app is rendered on the server, it doesn't have ResponsiveContainer, I disabled JavaScript (commenting out root.jsx > <Scripts /> component) and the chart renders as expected. -> https://stackblitz.com/edit/remix-run-remix-juyukz

[cmmartin]

@akamfoad Good to know, but I need to use ResponsiveContainer and I cannot hydrate if I use it on the client and not the server. So the question is why doesn't ResponsiveContainer work on the server? It should accept default values for width and height and render those on the server. All DOM operations should be in useEffect and won't run on the server, so there will be no attempts to illegally access window

[akamfoad]

@cmmartin
That is an interesting issue and I agree, recharts should let you specify the initial dimentions when you're rendering on server, or when JavaScript is disabled, I created #3595 from your comment and will try to fix this in #3596

[ckifer]

Merged #3596 and released in 2.7

[HimayunKhan]

Warning: Prop id did not match. Server: "starGrad107597008098180" Client: "starGrad608613605151304"
at linearGradient
at defs
at svg
at div
at StarRatings how to resolve this issue

[jessetabak33]

This fixes the issue for me on Nextjs 13:
useId() generates consitent id's between SSR and CSR

import { useId } from 'react';
const chartId = useId();
<PieChart id={chartId} width={width} height={height}>

[jake-chambers]

Getting this issue on ComposedChart and BarChart. Using unique id's on all elements, set isAnimationActive=false, and have specified dimensions

<ComposedChart
    id="imunique"
    width={1000}
    height={400}
    data={RANDOM_DATA}
>
    <XAxis dataKey="year">
        <Label
            value="Year"
            id="somethingelse"
            position="insideBottom"
            offset={-2}
        />
    </XAxis>
    <YAxis dataKey="peRatio">
        <Label
            value="P/E Ratio"
            position="insideLeft"
            angle={-90}
            id="somethingddx"
        />
    </YAxis>
    <Legend verticalAlign={"top"} height={40} />
    <CartesianGrid stroke="#f5f5f5" />
    <Bar
        name="Price to Earnings (P/E)"
        dataKey="peRatio"
        barSize={20}
        fill="lightblue"
        isAnimationActive={false}
    />
    <Line
        name="EPS"
        type="monotone"
        dataKey="eps"
        stroke="orange"
        isAnimationActive={false}
    />
    <Line
        name="Price"
        type="monotone"
        dataKey="price"
        stroke="green"
        isAnimationActive={false}
    />
</ComposedChart>

[ckifer]

Recharts has no explicit support for nextjs or SSR. 'use client'; should fix all of these as far as I understand

[sream]

After setting 'use client';, id to PieChart and isAnimationActive={false} I'm still getting:
Warning: Prop d did not match. Server: "M 126.23535171233422,6.371166007862911

I'll try to create a repro to isolate the problem and try to fix it.

[ckifer]

Cool thanks. Looks like its a path d attribute. That changes during animation but it shouldn't care with useclient as far as I know

[sream]

@ckifer It's weird that I have this issue is only with the PieChart and not the LineChart even though they are both using animations. I've patched it with the dynamic import for now not to halt the project but I'll invest time into trying to help on this topic.