Vue3+PrimeVue项目引入Chart组件编译失败，提示缺少loader

搭建重度依赖PrimeVue的Vue3项目时，运行npm run serve或npm run build，只要引入PrimeVue的Chart组件就会触发编译错误，注释掉该组件的导入语句则编译正常。尝试使用Apex Charts时也遇到类似问题，项目未配置自定义webpack.config.js。

编译错误信息：

cookies@0.1.0 serve
vue-cli-service serve

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

 ERROR  Failed to compile with 1 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/chart.js/auto/auto.js 1:0-54 3:0-5 3:18-31 5:0-33 5:0-33 6:15-20
@ ./node_modules/primevue/chart/chart.esm.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://10.228.51.139:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

相关代码文件：

main.js #

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import Primevue from "primevue/config";
import Chart from 'primevue/chart';    // <-- 注释此行即可正常编译

import "primevue/resources/themes/saga-blue/theme.css"; // theme
import "primevue/resources/primevue.min.css";           // core css
import "primeicons/primeicons.css";                     // icons
import "primeflex/primeflex.css"                        // primeflex css

const app = createApp(App).use(router);
app.use(Primevue);
app.component("Chart", Chart);

app.mount("#app");

package.json #

{
  "name": "cookies",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "prebuild": "node ./src/prebuild/prebuild.js"
  },
  "dependencies": {
    "chart.js": "^4.4.2",
    "core-js": "^3.6.5",
    "primeflex": "^3.3.1",
    "primeicons": "^6.0.1",
    "primevue": "^3.48.1",
    "vue": "^3.0.0",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-eslint": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

问题核心是Chart.js v4 使用了未转译的ES6+类字段语法，而Vue CLI 4默认不会对node_modules目录下的包进行Babel转译，导致Webpack无法解析该语法。可通过以下两种方式解决：

方案一：配置Babel转译Chart.js #

1. 安装必要的Babel插件

npm install @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods --save-dev

2. 在项目根目录创建或修改babel.config.js，添加转译配置：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-private-methods'
  ],
  transpileDependencies: ['chart.js']
}

3. 重启开发服务器或重新执行构建命令：

npm run serve

方案二：降级Chart.js到兼容版本 #

如果方案一不生效，可将Chart.js降级到v3版本（v3语法兼容Vue CLI 4的默认配置）：

npm uninstall chart.js
npm install chart.js@^3.9.1

内容的提问来源于stack exchange，提问作者user2792749