[Chartjs]-Cannot read properties of undefined (reading 'prototype') for chartJS library

by

1👍

It might be a bit late but I’m leaving the solution I found for future reference. Some of ChartJS plugins don’t work well with NextJS SSR, so you need to dynamically import your chart Component.

So if you have a component defined like this:

import { Chart } from "chart.js";
import { Bar } from 'react-chartjs-2';
import { MatrixController, MatrixElement } from "chartjs-chart-matrix";

Chart.register(
  MatrixController,
  MatrixElement
  ...
);

const ChartComponent = () => (
  <Bar
    data={data}
    options={options
    ...
  />
)

You should import it like this:

import dynamic from 'next/dynamic';

const BarChart = dynamic(
  () => import('<path-to-chart-component'),
  { ssr: false }
);

Leave a comment