react-chartjs-2 TypeError：o.default不是构造函数（带有图表的网页上的render.com部署问题）

Question

我正在努力为举重跟踪应用程序显示 MongoDB 数据库中的一些图表。每当我尝试访问已部署的 render.com 网站上包含我的图表的页面时，我都会收到以下错误：

Uncaught TypeError: o.default is not a constructor
    at n.value (index.js:290:28)
    at n.value (index.js:98:12)
    at _s (react-dom.production.min.js:261:217)
    at ws (react-dom.production.min.js:260:446)
    at bs (react-dom.production.min.js:259:431)
    at react-dom.production.min.js:283:96
    at kl (react-dom.production.min.js:281:398)
    at ol (react-dom.production.min.js:270:269)
    at k (scheduler.production.min.js:13:203)
    at MessagePort.P (scheduler.production.min.js:14:128)
wl-stats:1 
        
        
       Failed to load resource: the server responded with a status of 404 ()

奇怪的是，当在本地启动网页（npm start）时，图表显示正确并且页面没有问题。我想知道如果我的页面在本地环境中工作，为什么它不会显示在 render.com 上。我已经多次检查了依赖关系，据我所知，一切似乎都很好。我有什么想法可以克服这些错误吗？作为参考，我有两个部署，一个正在运行服务器（即使从本地环境连接也可以工作），另一个是我的静态站点，除了图表页面之外一切都可以工作。

wl-stats.js：

import React, { useState, useEffect } from 'react';
import { Line } from 'react-chartjs-2';
import axios from 'axios';
import { useUser } from '../UserContext';

const LineChart = ({ exerciseData, selectedExercise }) => {
  const selectedExerciseData = exerciseData[selectedExercise] || [];
  // Sort the data by date
  selectedExerciseData.sort((a, b) => new Date(a.date) - new Date(b.date));

  // Check if there's no data, and avoid rendering the chart
  if (selectedExerciseData.length === 0) {
    return <div>No data available.</div>;
  }

  // Extract timestamps and durations from selectedExerciseData
  const timestamps = selectedExerciseData.map((entry) => entry.date);
  const durations = selectedExerciseData.map((entry) => entry.duration);

  const data = {
    labels: timestamps,
    datasets: [
      {
        label: selectedExercise,
        data: durations,
        borderColor: 'rgba(75, 192, 192, 1)',
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderWidth: 2,
        pointBackgroundColor: 'rgba(75, 192, 192, 1)',
        pointRadius: 5,
        pointHoverRadius: 7,
      },
    ],
  };

  const options = {
    maintainAspectRatio: false,
    scales: {
      x: {
        type: 'time',
        title: {
          display: true,
          text: 'Date',
        },
      },
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Duration',
        },
      },
    },
    plugins: {
      legend: {
        labels: {
          fontSize: 25,
        },
      },
    },
  };

  return (
    <div>
      <Line data={data} height={400} width={600} options={options} />
    </div>
  );
};

const StatsWeightlifting = () => {
  const [selectedExercise, setSelectedExercise] = useState(''); // Set a default value here
  const [exerciseData, setExerciseData] = useState({});
  const [haveData, setHaveData] = useState(false); // New state for data availability

  const user = useUser();

  useEffect(() => {
    const fetchUserExerciseData = async () => {
      try {
        const response = await axios.get('https://dumbbell-data.onrender.com/exercises/');
        const userExercises = response.data.filter(
          (exercise) => exercise.email === user.currentUser
        );

        const reformattedData = {};

        userExercises.forEach((exercise) => {
          const date = exercise.date.substring(0, 10);
          if (!reformattedData[exercise.description]) {
            reformattedData[exercise.description] = [];
          }

          reformattedData[exercise.description].push({
            date,
            duration: exercise.duration,
          });
        });

        setExerciseData(reformattedData);
        setHaveData(true); // Set to true when data is available

        // Set the default selected exercise 
        if (Object.keys(reformattedData).length > 0) {
          setSelectedExercise(Object.keys(reformattedData)[0]);
        }
      } catch (error) {
        console.log(error);
        setHaveData(false); // Set to false on error
      }
    };

    fetchUserExerciseData();
  }, [user.currentUser]);

  return (
    <div>
      <h1>Weightlifting Stats</h1>
      <select
        value={selectedExercise}
        onChange={(e) => setSelectedExercise(e.target.value)}
      >
        {Object.keys(exerciseData).map((exercise) => (
          <option key={exercise} value={exercise}>
            {exercise}
          </option>
        ))}
      </select>
      {haveData ? ( // Conditionally render based on data availability
        <LineChart exerciseData={exerciseData} selectedExercise={selectedExercise} />
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
};



export default StatsWeightlifting;

我尝试了一些方法，例如检查依赖关系并尝试等到数据到达来渲染图表，但没有任何效果。我不明白为什么即使连接到部署的服务器，本地环境也会显示，但 render.com 不会显示页面。

Answer 1

您遇到的错误“Uncaught TypeError: o.default is not a constructor”是与 ES6 模块导入的使用相关的常见 JavaScript 错误。此错误表明您导入和使用模块默认导出的方式可能存在问题。

在您的代码中，您的 React 组件或导入它们的方式似乎没有任何问题。您看到的错误消息可能是由于在本地环境中运行应用程序与在 Render.com 上部署应用程序时使用的依赖项版本存在差异所致。

以下几个步骤可帮助您排除故障并可能解决此问题：

检查依赖关系： 确保项目中使用的依赖项和版本在本地环境与 Render.com 上的部署环境之间匹配。在项目目录中，您可以检查 package.json 文件中的依赖项。确保保持您的依赖项一致且最新。

清除节点模块： 有时，由于 node_modules 文件夹中的冲突，可能会出现此类问题。为了排除任何冲突，您可以尝试删除node_modules文件夹和package-lock.json或yarn.lock文件，然后再次运行npm install或yarn install以重新安装依赖项。

检查 React 和 Chart.js 版本： 确保您使用的是 React 和 Chart.js 的兼容版本。 Chart.js 可能需要特定版本的 React 才能正常工作。您可以在各自的文档中检查兼容性信息。

构建您的生产应用程序： 部署到 Render.com 时，请确保构建用于生产的 React 应用程序。您可以使用构建脚本来完成此操作。在 package.json 文件中，添加一个“构建”脚本，用于指定应用程序的构建命令。例如：

json 复制代码

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

然后，运行 npm run build 来生成应用程序的优化版本。

检查网络请求： 确保对“https://dumbbell-data.onrender.com/exercises/”的 API 请求在 Render.com 上按预期工作。有时，部署环境可能有不同的网络配置，您可能需要调整发出网络请求的方式。

错误记录： 在您的应用程序中实施错误日志记录和监视，以获取有关 Render.com 上的错误的更多详细信息。 Sentry 或 LogRocket 等服务可以帮助您确定问题的根本原因。

如果问题仍然存在，提供有关项目依赖项和配置的更多信息以及来自 Render.com 的任何相关错误消息或日志可能会有所帮助。这些附加信息有助于更准确地诊断问题。