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

by

16👍

✅

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

2👍

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",

0👍

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

Leave a comment