ChartJs 在创建雷达时不起作用

Question

我创建了一个虚拟雷达字符，它说了一个错误。 他们提供的文档中使用了基本代码：

    import Chart, { Filler, LineElement, PointElement, RadialLinearScale } from 'chart.js/auto';
    import { getRelativePosition } from 'chart.js/helpers';
    import {Radar} from 'react-chartjs-2'

export default function Profile () {
     const data = {
          labels: [
            'Eating',
            'Drinking',
            'Sleeping',
            'Designing',
            'Coding',
            'Cycling',
            'Running'
          ],
          datasets: [{
            label: 'My First Dataset',
            data: [65, 59, 90, 81, 56, 55, 40],
            fill: true,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 99, 132)'
          }, {
            label: 'My Second Dataset',
            data: [28, 48, 40, 19, 96, 27, 100],
            fill: true,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgb(54, 162, 235)',
            pointBackgroundColor: 'rgb(54, 162, 235)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(54, 162, 235)'
          }]
        };
    
        const config = {
          type: 'radar',
          data: data,
          options: {
            elements: {
              line: {
                borderWidth: 3
              }
            }
          },
        };

return (        <Radar  data={data}></Radar> );

}

在后端完成所有这些之后，一切似乎都正常，当我重新加载页面时出现此错误。我尝试了很多选择但是..

我不明白我做错了什么。