reactchartjs / react-chartjs-2

React components for Chart.js, the most popular charting library
https://react-chartjs-2.js.org
MIT License
6.56k stars 2.37k forks source link

[Bug]: Nextjs RangeError: invalid digits value: NaN #1072

Closed axquired24 closed 1 year ago

axquired24 commented 1 year ago

Would you like to work on a fix?

Current and expected behavior

Hi, Im working using Nexjs on the Bar Chart & Doughnut Chart. It is okay in development build (npm run dev) But it breaking the application on the production Build (npm run build && npm run start), the Bar Chart is breaking.

It says RangeError: invalid digits value: NaN on the browser console.

Note: if I remove this component from pages, it is work. Have you guys facing this issue before?

import React, { Component } from "react";
import { Bar } from "react-chartjs-2";

const UserData = [
    {
        id: 1,
        year: 2016,
        userGain: 80000,
        userLost: 823,
    },
    {
        id: 2,
        year: 2017,
        userGain: 45677,
        userLost: 345,
    },
    {
        id: 3,
        year: 2018,
        userGain: 78888,
        userLost: 555,
    },
    {
        id: 4,
        year: 2019,
        userGain: 90000,
        userLost: 4555,
    },
    {
        id: 5,
        year: 2020,
        userGain: 4300,
        userLost: 234,
    },
]

const SampleBarChart = () => {
    const dataX = {
        labels: UserData.map(o => o.year),
        datasets: [
          {
            label: 'Users Gained',
            backgroundColor: 'rgba(0, 255, 0, 0.2)',
            borderColor: 'rgb(0, 255, 0)',
            borderWidth: 1,
            data: UserData.map(o => o.userGain)
          }
        ]
      }

      const optionsX = {
        plugins: {
          title: {
            display: true,
            text: 'Bar Chart'
          }
        }
      }
    return (
        <Bar 
            data={dataX}
            options={optionsX}
        />
    );
}

export default SampleBarChart;

Reproduction

npm run build && npm run start

chart.js version

v3.5.0

react-chartjs-2 version

v4.3.1

Possible solution

No response

axquired24 commented 1 year ago

swcMinify: false in next.config.js makes it work.

source: https://github.com/chartjs/Chart.js/issues/10673