Chartjs - Module parse failed: Unexpected token (567:17) at vuejs 3 project

Question

I installed vue-chartjs via npm command, to mu vuejs 3 project but I can't build my project, I see an error.

error in ./node_modules/chart.js/dist/chart.js

Module parse failed: Unexpected token (567:17) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | }; | class DatasetController {

static defaults = {}; | static datasetElementType = null; | static dataElementType = null;

@ ./node_modules/vue-chartjs/dist/index.js 9:0-185 169:27-34 259:2-9 284:49-62 285:59-77 286:51-65 287:49-62 288:61-80 289:53-68 290:55-71 291:57-74 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./Scripts/Feature/Charts/ChartBar.vue?vue&type=script&lang=ts& @ ./Scripts/Feature/Charts/ChartBar.vue?vue&type=script&lang=ts& @ ./Scripts/Feature/Charts/ChartBar.vue @ ./Scripts/Feature/index.ts @ ./Scripts/app.ts @ ./Scripts/index.ts @ multi ./Scripts/index.ts

I added config setting to vue.config.js vue-chartjs but it not help.

const AssetsPlugin = require("assets-webpack-plugin");
const path = require("path");
const webpack = require("webpack");

module.exports = {
    runtimeCompiler: true,
    productionSourceMap: false,
    lintOnSave: true,
    publicPath: '/dist/',
    chainWebpack: config => {
        config
            .entry('app')
            .clear()
            .add('./Scripts/index.ts')
            .end();
        config.resolve.alias.set('@', path.join(__dirname, './Scripts')),
        config.module
            .rule('modernizr')
            .test(/\.modernizrrc$/)
            .use('webpack-modernizr-loader')
            .loader('webpack-modernizr-loader');
        config.module
            .rule('magic-grid')
            .test(/\.js$/)
            .include
            .add(path.resolve(__dirname, "./node_modules/magic-grid"))            
            .end()
            .use('babel-loader')
            .loader('babel-loader');
        config.module
            .rule('vue-chartjs')
            .test(/\.js$/)
            .include
            .add(path.resolve(__dirname, "./node_modules/vue-chartjs"))            
            .end()
            .use('babel-loader')
            .loader('babel-loader');            
        config.module
            .rule('vue-chart')
            .test(/\.js$/)
            .include
            .add(path.resolve(__dirname, "./node_modules/vue-chart"))            
            .end()
            .use('babel-loader')
            .loader('babel-loader');
    },

    configureWebpack:{
        devtool: process.env.NODE_ENV === 'development' ? 'source-map' : '',
        plugins: [
            new AssetsPlugin({
                filename: 'assets.json',
                path: 'dist',
                fullPath: true
            }),
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
        ],

        resolve: {
            alias: {
                vue$: 'vue/dist/vue.esm.js', // 'vue/dist/vue.common.js' for webpack 1
                modernizr$: path.resolve(__dirname, ".modernizrrc"),
                '@': path.resolve(__dirname, "./Scripts")
            }
        },

        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendors: {
                        name: 'chunk-vendors',
                        test: /[\\/]node_modules[\\/]((?!(@fullcalendar)).*)[\\/]/,
                        priority: -10,
                        chunks: 'initial'
                    },
                    vendorsAsync: {
                        name: 'chunk-vendors-async',
                        test: /[\\/]node_modules[\\/]/,
                        priority: -10,
                        chunks: 'async'
                    }
                },
                minSize: 0
            }
        }
    },

    css: {
        sourceMap: process.env.NODE_ENV === 'development' ? true : false,
        loaderOptions: {
            sass: {
                prependData: `
                    @import "@/Project/Styles/variables.scss";
                    @import "@/Project/Styles/mixins.scss";
                    @import "@/Project/Styles/forms-mixins.scss";
                    @import "@/Project/Styles/functions.scss";
                    @import "@/Project/Styles/functions-inline-svg.scss";
                    @import "@/Project/Styles/icons.scss";
                `
            }
        }
    }
};

what I need to do to fix it ?