Chart.js Error: You may need an appropriate loader to handle this file type

I’m currently attempting to use Chart.js within my react application but when I go to build my application I’m presented with this error

ERROR in ./node_modules/chart.js/dist/chart.esm.js
Module parse failed: D:MyAppnode_moduleschart.jsdistchart.esm.js Unexpected token (6613:12)
You may need an appropriate loader to handle this file type.
|         if (intermediateIndex1 !== startIndex && intermediateIndex1 !== lastIndex) {
|           decimated.push({
|             ...data[intermediateIndex1],
|             x: avgX,
|           });
 @ ./src/imports/Dashboard/Dashboard.js 21:12-31
 @ ./src/App.js
 @ ./src/index.js
 @ multi babel-polyfill ./src/index.js

I tried researching online to see if anyone else has had the same issue, but I had no luck.

Below is my Webpack config file:

const path = require('path');

module.exports = {
    entry: ['babel-polyfill', './src/index.js'],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      test: /.jsx?$/,
      exclude: /node_modules/
    }, {
      test: /.s?css$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    },{
        test: /.(jpe?g|png|gif|svg|mp3)$/i,
        loaders: [
            'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }
    ]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    historyApiFallback: true
  }
};

And here is my bablerc file

{
    "presets": [
      "env",
      "react",
      "stage-0"
    ],
    "plugins": [
      "transform-class-properties"
    ]
  }

This is the list of my dependencies that are installed

"dependencies": {
    "@babel/polyfill": "^7.0.0",
    "aws-sdk": "^2.580.0",
    "axios": "^0.19.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "7.1.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.2",
    "chart.js": "^3.1.0",
    "core-js": "^2.5.3",
    "css-loader": "0.28.4",
    "express": "latest",
    "file-loader": "^1.1.5",
    "google-maps-react": "^2.0.2",
    "image-webpack-loader": "^3.4.2",
    "immutability-helper": "^2.4.0",
    "jquery": "^3.4.1",
    "jsbarcode": "^3.11.0",
    "jsonwebtoken": "^8.1.0",
    "lodash": "^4.17.14",
    "moment": "^2.22.2",
    "node-sass": "^4.12.0",
    "node-schedule": "^1.3.2",
    "nodemailer": "^4.7.0",
    "normalize.css": "7.0.0",
    "npm": "^6.10.0",
    "papaparse": "^5.1.1",
    "promise-mysql": "^3.1.0",
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-csv": "^1.0.14",
    "react-dom": "^16.0.0",
    "react-router-dom": "4.2.2",
    "react-scripts": "1.0.14",
    "sass-loader": "6.0.6",
    "socket.io": "^2.0.3",
    "style-loader": "0.18.2",
    "twilio": "^3.24.0",
    "validator": "8.0.0",
    "webpack": "3.1.0",
    "webpack-dev-server": "2.5.1"
  },

I expected the error to tell me what loader I needed to install to use with Chart.js but it does not specify. If anyone knows which loader I need to install and where I should put it in my files that would be awesome. TIA!

Answer

Chart.js version 3 is not compatible. Change it to ^2.9.4. The same problem as you and I have been solved.