Unexpected token (567:17) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

Question

I'm setting up a simple Vue project that relies heavily on PrimeVue. I've used PrimeVue for other projects but never a Vue 3 project so it seems like I'm missing something. When I run npm run serve or npm run build I'm displayed the following error:

 [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

The error only appears importing the Chart component into the project. It compiles perfectly otherwise.

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

What am I missing? I don't have a webpack.config.js or any other config file. Also, for what it's worth, I thought this was maybe an issue with chart.js at first, but I ran into a similar issue when I tried to install and use Apex Charts which leads me to believe it's some sort of configuration issue on my end. I've just never had this issue with any of my Vue 2 projects.

Answer 1

Turns out I had to update my node modules. npm audit fix still left me with: 71 vulnerabilities (1 low, 49 moderate, 16 high, 5 critical). So I had to run npm audit fix --force and now I have 4 moderate severity vulnerabilities and a different error message that said ESLint is not a constructor. I fixed this by installing a newer version of ESLint. It was 6.7.2 according to my package.json and it was 7.32.0 after running `npm install -D [email protected]. Problem solved, everything works properly now.