When I call npm run start to run my react app, I get a compilation error:

Failed to compile.

Error in ./~/chart.js/dist/chart.js
Module parse failed: [...]/node_modules/chart.js/dist/chart.js Unexpected token (9498:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (9498:12)
 @ ./src/App.js 15:13-32

Here's how I'm using it:

import Chart from 'chart.js'

function renderChart(pmi25, pmi10) {
  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
    ...
  });
  return myChart
}

I found the problem in chart.js here - third line - but I'm not much of a javascript developer so I don't know what the issue is:

if (intermediateIndex1 !== startIndex && intermediateIndex1 !== lastIndex) {
  decimated.push({
    ...data[intermediateIndex1],
    x: avgX,
});

I did see another SO post with this same error - Chart.js Error: You may need an appropriate loader to handle this file type - but the solutions listed don't work for me - I'm not using babel or webpack as far as I'm aware and I'd really like to use Chart.js version 3 and not version 2.

Here's my package.json:

{
  "name": ...,
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^5.1.3",
    "chart.js": "^3.6.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
  },
  "proxy": "http://127.0.0.1:5000"
}

I'm using:

• Node version 17.1.0
• NPM version 8.1.2

I'd be happy to put in a PR on the project if someone could explain to me what the issue is with that snippet of code - it looks like normal JavaScript to me.