logo标签列表

Next.js 应用程序中使用 ChartJS 时出现错误 "RangeError: minimumFractionDigits value is out of range"。

javascriptreactjsnext.js
3

我正在尝试使用 react-chartjs-2.js 创建一个应用程序。

在本地环境运行正常，但在生产环境中，出现以下错误：

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

这是我的浏览器错误：控制台错误。
framework-7751730b10fa0f74.js:9 
        
       RangeError: minimumFractionDigits value is out of range.
    at new NumberFormat (<anonymous>)
    at 389-ed817b9827d847c5.js:11:22041
    at e3 (389-ed817b9827d847c5.js:11:22084)
    at e1.numeric (3fff1979-b3fd6dd997b88037.js:6:36399)
    at g (389-ed817b9827d847c5.js:6:4424)
    at e1.generateTickLabels (3fff1979-b3fd6dd997b88037.js:6:44125)
    at e1._convertTicksToLabels (3fff1979-b3fd6dd997b88037.js:6:47183)
    at e1.update (3fff1979-b3fd6dd997b88037.js:6:41586)
    at tp (3fff1979-b3fd6dd997b88037.js:6:66794)
    at Object.update (3fff1979-b3fd6dd997b88037.js:6:69634)
um @ framework-7751730b10fa0f74.js:9
main-e7a7892cb0edc024.js:1 
        
       RangeError: minimumFractionDigits value is out of range.
    at new NumberFormat (<anonymous>)
    at 389-ed817b9827d847c5.js:11:22041
    at e3 (389-ed817b9827d847c5.js:11:22084)
    at e1.numeric (3fff1979-b3fd6dd997b88037.js:6:36399)
    at g (389-ed817b9827d847c5.js:6:4424)
    at e1.generateTickLabels (3fff1979-b3fd6dd997b88037.js:6:44125)
    at e1._convertTicksToLabels (3fff1979-b3fd6dd997b88037.js:6:47183)
    at e1.update (3fff1979-b3fd6dd997b88037.js:6:41586)
    at tp (3fff1979-b3fd6dd997b88037.js:6:66794)
    at Object.update (3fff1979-b3fd6dd997b88037.js:6:69634)
J @ main-e7a7892cb0edc024.js:1
main-e7a7892cb0edc024.js:1 
        
       A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred

以下是我的代码

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;

在开发环境中，它在 localhost:3000 上运行良好，但在生产环境/部署到服务器时会出现问题。

有人能帮我理解并解决这个问题吗？

1
浏览器控制台显示了什么？ - André Alçada Padez
我已经更新了我的问题，并附上了错误信息@AndréAlçadaPadez。 - Josal
当你遇到一个只在部署时发生的问题时，你应该尝试通过运行“build”和“serve”来本地复制它。这将使调试更容易。 - Sheraff
3个回答
2

我在这里找到了答案。

只需在next.config.js中添加swcMinify: false即可。

2
这是你的nextJS版本与ChartJS版本之间的版本问题。
例如，我使用的是nextJS版本12.3.1和chartJS版本4.0.1。升级到12.3.2-canary.10或者切换回chartJS版本2.9.4可以解决这个问题。
你也可以在next.config.js中将swcMinify: true改为false，但这只是一个临时解决方案，会减慢构建时间。
升级到 next@12.3.4 和 chart.js@4.2.1 仍然无法正常工作。但是 swcMinify: false 可以运行。 - cwtuan
0

从网上查到的信息显示，当您运行不兼容的 Chart.js/react-charts 版本时，就会出现这种错误。

没关系，我找到问题了。问题在于我使用了 v3.1 的 Chart.js，而尝试使用来自v3.5 的设置。 更改 JS 文件版本，现在它运行良好。

从https://www.npmjs.com/package/react-chartjs-2中得知：

我们建议使用 chart.js@^3.0.0。

请尝试查看您是否正在运行正确的版本...

另一个可能的解决方案：

RangeError：minimumFractionDigits 值超出范围。Chart.js

1
尝试过了，但没有成功。 - Josal
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接