CODEWITHSUNDEEP
javascriptnode.jswebpackchart.js
Michael
Michael

Reputation: 1714

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:\MyApp\node_modules\chart.js\dist\chart.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!

Upvotes: 13

Views: 19222

Answers (4)

Efrain Leonardo Pardo Pantano
Efrain Leonardo Pardo Pantano

Reputation: 11

As kiki_chen mentioned, Chart.js is not compatible. If you are using react-chartjs-2 you should downgrade both packages:

npm install --save chart.js@^2.9.4 react-chartjs-2@^2.11.2

https://react-chartjs-2.js.org/docs/chartjs-v2/

That worked for me.

Upvotes: 1

Sergio
Sergio

Reputation: 21

I had the same error. I've just updated babel dependencies, some others, and the error is disappeared. But after that, you have to update some of the chart properties (for ex. horizontalBar to bar and configured with indexAxis option).

"@babel/core": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"babel-core": "^7.0.0-bridge.0",

Upvotes: 2

Rafał G.
Rafał G.

Reputation: 1692

I have a different setup so I'm not sure if the fix I used can apply here without additional tweaks, but since this is the best search engine match for this error, I'll share my results, maybe it'll help someone. There should be no need to stick with an older version of a library.

I'm using Webpack via Laravel Mix in Laravel 6 but my Mix package was very old, so the first thing I had to do was to update it to the current version (for Laravel 6 it's v5). After that I added the following .babelrc file:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "debug": true,
                "modules": false,
                "forceAllTransforms": true,
                "useBuiltIns": "usage",
                "targets": "last 1 version, > 1%"
            }
        ]
    ]
}

I also added the Babel polyfill package:

npm install -D @babel/polyfill

After that I can run npm run dev without any errors.

The file and the command come from this article: https://fostermade.co/blog/laravel-mix-and-es2015-javascript

Upvotes: 0

kiki_chen
kiki_chen

Reputation: 186

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

Upvotes: 17

Related Questions