意外标记 (567:17) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件

Question

我正在建立一个简单的 Vue 项目，该项目严重依赖 PrimeVue。我已经将 PrimeVue 用于其他项目，但从未使用过 Vue 3 项目，所以看起来我错过了一些东西。当我运行

npm run serve

或

npm run build

时，我显示以下错误：

 [email protected] 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

只有将Chart组件导入到项目中时才会出现该错误。否则它编译完美。

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';    // <-- comment out and it compiles fine

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"
  ]
}

我错过了什么？我没有 webpack.config.js 或任何其他配置文件。另外，就其价值而言，我一开始认为这可能是 Chart.js 的问题，但当我尝试安装和使用 Apex Charts 时遇到了类似的问题，这让我相信这是我的某种配置问题结尾。我的任何 Vue 2 项目都从未遇到过这个问题。

Answer 1

结果我必须更新我的节点模块。

npm audit fix

仍然给我留下了：71 个漏洞（1 个低漏洞、49 个中等漏洞、16 个高漏洞、5 个严重漏洞）。所以我必须运行

npm audit fix --force

，现在我有 4 个中等严重程度的漏洞和一条不同的错误消息，指出 ESLint 不是构造函数。我通过安装更新版本的 ESLint 解决了这个问题。根据我的 package.json，它是 6.7.2，运行 `npm install -D [email protected] 后，它是 7.32.0。问题已解决，现在一切正常。