Vuejs3/vue-chart@5.3.1/chart.js@4.4.2 にて webpack コンフィグエラー

実現したいこと

Vue3 にて vue-chart を利用したい，

npm run serve 時に webpackage の設定ミスらしいエラーにより，アプリの起動ができない．

前提

package.json
1{
2  "name": "myapp",
3  "version": "0.1.0",
4  "private": true,
5  "scripts": {
6    "serve": "vue-cli-service serve",
7    "build": "vue-cli-service build",
8    "lint": "vue-cli-service lint"
9  },
10  "dependencies": {
11    "chart.js": "^4.4.2",
12    "core-js": "^3.6.5",
13    "firebase": "^10.11.1",
14    "vue": "^3.0.0",
15    "vue-chartjs": "^5.3.1",
16    "vue-router": "^4.0.0-0"
17  },
18  "devDependencies": {
19    "@vue/cli-plugin-babel": "~4.5.0",
20    "@vue/cli-plugin-eslint": "~4.5.0",
21    "@vue/cli-plugin-router": "~4.5.0",
22    "@vue/cli-service": "~4.5.0",
23    "@vue/compiler-sfc": "^3.0.0",
24    "babel-eslint": "^10.1.0",
25    "eslint": "^6.7.2",
26    "eslint-plugin-vue": "^7.0.0"
27  }
28}

Vue のプロジェクトルートと src 配下のファイルは以下になっています．

(*'-') < ls -al | sed 's/.*May/May/'
total 1344
May  8 11:09 .
May  7 18:55 ..
May  7 18:55 .browserslistrc
May  7 18:55 .eslintrc.js
May  7 18:55 .gitignore
May  7 18:55 README.md
May  7 18:55 babel.config.js
May  8 10:32 node_modules
May  8 10:32 package-lock.json
May  8 10:32 package.json
May  7 18:55 public
May  7 18:55 src
May  8 11:07 webpack.config.js

(*'-') < ls -al src | sed 's/.*May/May/'
total 16
May  7 18:55 .
May  8 11:09 ..
May  7 20:20 App.vue
May  7 18:55 components
May  7 18:55 composables
May  7 18:55 firebase
May  8 03:55 main.js
May  7 18:55 router
May  7 20:11 views

発生している問題・エラーメッセージ

(*'-') <  npm run serve                  

> reading-list@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 2 errors                                                                                                                                                11:31:16 AM

 error  in ./node_modules/vue-chartjs/dist/index.js

Module parse failed: Unexpected token (227:37)
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
|             const ref = shallowRef(null);
|             const reforwardRef = (chartRef)=>{
>                 ref.value = chartRef?.chart;
|             };
|             expose({

 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/Simulator.vue?vue&type=script&lang=js 1:0-34 7:4-7
 @ ./src/views/Simulator.vue?vue&type=script&lang=js
 @ ./src/views/Simulator.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://172.18.203.7:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 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/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/Simulator.vue?vue&type=script&lang=js 2:0-108 3:0-7 3:17-22 3:24-31 3:33-39 3:41-51 3:53-66 3:68-79
 @ ./src/views/Simulator.vue?vue&type=script&lang=js
 @ ./src/views/Simulator.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://172.18.203.7:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

該当のソースコード

Simulator.vue
1<template>
2  <Bar
3    id="my-chart-id"
4    :options="chartOptions"
5    :data="chartData"
6  />
7</template>
8
9<script>
10import { Bar } from 'vue-chartjs'
11import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
12
13ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
14
15export default {
16  name: 'BarChart',
17  components: { Bar },
18  data() {
19    return {
20      chartData: {
21        labels: [ 'January', 'February', 'March' ],
22        datasets: [ { data: [40, 20, 12] } ]
23      },
24      chartOptions: {
25        responsive: true
26      }
27    }
28  }
29}
30</script>

試したこと

Simulator.vue の <script> タグの中身をコメントアウトすれば npm run serve はエラーなく，website の起動ができます．

Simulator.vue に関連コードを追加後にこのエラーとなり，起動できません．

元々 webpack.config.js というファイルはありませんでしたが，これを新規作成し，以下の内容で保存．再度 npm run serve を実行したが，同じエラーとなりました．

webpack.config.js
1// webpack.config.js or vue.config.js
2
3module.exports = {
4    // Other webpack configurations...
5  
6    module: {
7      rules: [
8        {
9          test: /\.js$/,
10          exclude: /node_modules/,
11          use: {
12            loader: 'babel-loader'
13          }
14        }
15      ]
16    }
17  };
18  %