-1

Im trying to create a chart with react-chart2.js in my react and typescript project but it keeps giving me this error "Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/chart__js.js?t=1691083062256&v=d3a1fbc2' does not provide an export named 'default'" this is my code

import { useEffect } from "react";
import React from "react";
import Chart from "chart.js";

interface EarningChartProps {
  width?: number;
  height?: number;
}

class EarningChart extends React.Component<EarningChartProps> {
  render() {
    const ctx = document.getElementById("myChart").getContext("2d");
    const myChart = new Chart(ctx, {
      type: "line",
      data: {
        labels: ["Mar", "Apr", "May", "Jun", "Jul", "Aug"],
        datasets: [
          {
            data: [50, 150, 300, 500, 750, 1100],
            label: "Users",
            borderColor: "#3A5743",
            backgroundColor: "#3A5743",
            fill: false,
          },
          {
            data: [0, 0, 0, 0, 0, 0],
            label: "Months",
            borderColor: "#F7B32B",
            backgroundColor: "#F7B32B",
            fill: false,
          },
        ],
      },
    });

    return (
      <div className="w-auto h-auto">
        <canvas id="myChart" width={this.props.width} height={this.props.height} />
      </div>
    );
  }
}

export default EarningChart;
Ayooluwa Babalola
  • 3
  • 3
  • Consider checking out their [quickstart docs](https://react-chartjs-2.js.org/#:~:text=Then%2C%20import%20and%20use%20individual%20components%3A) which provides examples. – Dave Newton Aug 03 '23 at 17:29
  • Use `--esModuleInterop` to have typescript understand how to provide and recognize a synthetic default – Aluan Haddad Aug 04 '23 at 08:40

0 Answers0