NextJs - Application error: a client-side exception has occurred

I'm trying to create an application using react-chartjs-2.js It works locally but in production, it gives the following error:

Application error: a client-side exception has occurred (see the browser console for more information).

Here's my browser console error

And here's my code

import React from "react";

import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);
export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: "top",
    },
    title: {
      display: false,
    },
  },
};

const labels = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];
export const data = {
  labels,
  datasets: [
    {
      label: "Weekley Data",
      data: [10, 20, 30, 40, 50, 60, 70],
      borderColor: "rgb(255, 99, 132)",
      backgroundColor: "rgba(255, 99, 132, 0.5)",
    },
  ],
};

function Components() {
  return (
    <div style={{ width: "80%" }}>
      <Line options={options} data={data} />
    </div>
  );
}

export default Components;

It works fine on localhost:3000 in the development environment however it breaks in a production environment / when deployed to the server.

Can anyone help me understand and fix this issue?