Recharts - Warning: Prop `id` did not match. Server:

Bug report

Describe the bug

When using rechart I am getting a mismatch error between server and client. The props that are mismatching seem to change arbitrary, sometimes it’s id but I also had other cases, where it was y.

To Reproduce:

1. Clone Repo
2. yarn install
3. yarn dev
4. navigate to http://localhost:3030/sample with open console

Expected behavior

No warning in the console.

Screenshots

Added in the repo.

System information

• OS: MacBookPro 16"
• Browser (if applies): Chrome
• Version of Next.js: 9.3.6
• Version of Node.js: 13.13.0

Additional context

I had a similar problem with react-bootstrap. I would really appreciate a blogpost or extended documentation that explains what is happening here.

[jamesmosier]

It looks like some components just can’t be server rendered with recharts https://github.com/recharts/recharts/issues/359

One way around this is to not server render your chart:

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 />;
}

[brunocrosier]

This is a generic Next.js warning that happens when the DOM in the client does not exactly match the DOM that was rendered on the server. In this case, you’re seeing it because the recharts id is different on the client side. It’s not a serious error so the easiest option is probably to ignore it.

Someone else might be able to shed more light on how to make the error go away, but I hope this explains why you’re seeing it