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 textat Text (webpack-internal:///./node_modules/recharts/es6/component/Text.js:232:5)at gat Layer (webpack-internal:///./node_modules/recharts/es6/container/Layer.js:23:24)at gat gat 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 svgat Surface (webpack-internal:///./node_modules/recharts/es6/container/Surface.js:23:24)at divat CategoricalChartWrapper (webpack-internal:///./node_modules/recharts/es6/chart/generateCategoricalChart.js:920:7)at SimpleBarChartat mainat divat HomeHere 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 (<BarChartid={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.
Best Answer
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 });For those struggling with rendering the Pie chart using @plutownium's answer, you need to use a hybrid of dynamic imports with ssr disabled and regular importing:
import { Pie, Cell } from "recharts";const PieChart = dynamic(() => (import("recharts").then(recharts => recharts.PieChart)), { ssr: false });const Example = () => (<PieChart width={100} height={100}><Pie data={data} {/* etc... */}>{ data.map(entry => (<Cell fill={entry.color} key={entry.key} />))}</Pie></PieChart>);This should prevent hydration warnings and allow the chart to render.
You can try this. It solves my problem
const LineChart = dynamic(() => import('recharts').then(mod => mod.LineChart), {ssr: false,loading: () => <p>Loading...</p>});use the following to ensure Client-Side Rendering:
const [isClient, setIsClient] = useState(false);useEffect(() => {setIsClient(true);}, []);