hydration failed error using recharts with nextjs

Question

I have just started a new Next project, and I want to use a library called ReCharts.

However, whenever I use it in my project, even with one of the provided examples, it throws the following errors:

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: An error occurred during hydration. The server HTML was replaced with client content in `<div>`.

Warning: Prop `y` did not match. Server: "5" Client: "10.800000190734863"
    at text
    at Text (webpack-internal:///./node_modules/recharts/es6/component/Text.js:232:5)
    at g
    at Layer (webpack-internal:///./node_modules/recharts/es6/container/Layer.js:23:24)
    at g
    at g
    at Layer (webpack-internal:///./node_modules/recharts/es6/container/Layer.js:23:24)
    at CartesianAxis (webpack-internal:///./node_modules/recharts/es6/cartesian/CartesianAxis.js:77:5)
    at svg
    at Surface (webpack-internal:///./node_modules/recharts/es6/container/Surface.js:23:24)
    at div
    at CategoricalChartWrapper (webpack-internal:///./node_modules/recharts/es6/chart/generateCategoricalChart.js:920:7)
    at SimpleBarChart
    at main
    at div
    at Home

Here is my code:

const data = [
    {
        name: "Page A",
        uv: 4000,
        pv: 2400,
        amt: 2400,
    },
    {
        name: "Page B",
        uv: 3000,
        pv: 1398,
        amt: 2210,
    },
    {
        name: "Page C",
        uv: 2000,
        pv: 9800,
        amt: 2290,
    },
    {
        name: "Page D",
        uv: 2780,
        pv: 3908,
        amt: 2000,
    },
    {
        name: "Page E",
        uv: 1890,
        pv: 4800,
        amt: 2181,
    },
    {
        name: "Page F",
        uv: 2390,
        pv: 3800,
        amt: 2500,
    },
    {
        name: "Page G",
        uv: 3490,
        pv: 4300,
        amt: 2100,
    }
];

function SimpleBarChart(){
    return (
        <BarChart
            id={1}
            width={500}
            height={300}
            data={data}
            margin={{
                top: 5,
                right: 30,
                left: 20,
                bottom: 5,
            }}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey="pv" fill="#8884d8" />
                <Bar dataKey="uv" fill="#82ca9d" />
        </BarChart>
    );
}

export default function Home(){
    return (
        <SimpleBarChart />
    );
}

Note that this is copied and pasted in from here, so it should really "just work" out of the box.

Answer 1

As @juliomalves says, the answer is to use dynamic imports with ssr disabled:

import dynamic from "next/dynamic";

const SimpleBarChartWithoutSSR = dynamic(
    import("../components/rechartsCharts/SimpleBar"),
    { ssr: false }
);
const SimpleScatterChartWithoutSSR = dynamic(
    import("../components/rechartsCharts/SimpleScatter"),
    { ssr: false }
);
const DashedLineChartWithoutSSR = dynamic(
    import("../components/rechartsCharts/DashedLine"),
    { ssr: false }
);
const PercentAreaChartWithoutSSR = dynamic(
    import("../components/rechartsCharts/PercentArea"),
    { ssr: false }
);