VueJS and Vite: Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)

Question

I am trying to understand why I get the error: [commonjs--resolver] Unexpected character '�' (Note that you need plugins to import files that are not JavaScript) file: /..../..../WebProjects/..../ProjectName/node_modules/fsevents/fsevents.js:1:0 on my VueJS web app. The error makes me think that vite somehow cannot build the fsevents.node file found in the fsevents folder, in the node_modules directory.

I am also not sure how the fsevents package was installed; I did not explicitly install it. I thought running npm explain fsevents might shed light on which of my installed packages depend on fsevents.

My package.json app isn't too complex:

{
  "name": "project-name",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@vitejs/plugin-basic-ssl": "^1.0.1",
    "axios": "^1.5.1",
    "bulma": "^0.9.4",
    "chart.js": "^4.4.0",
    "is-what": "^4.1.15",
    "pinia": "^2.1.6",
    "rollup": "^4.3.0",
    "vite-plugin-vuetify": "^1.0.2",
    "vue": "^3.3.4",
    "vue-chartjs": "^5.2.0",
    "vue-loading-overlay": "^6.0.3",
    "vue-router": "^4.2.4",
    "vue3-easy-data-table": "^1.5.47",
    "vuetify": "^3.3.23"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.2",
    "@tsconfig/node18": "^18.2.0",
    "@types/node": "^18.18.5",
    "@vitejs/plugin-vue": "^4.4.0",
    "@vitejs/plugin-vue-jsx": "^3.0.2",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.46.0",
    "eslint-plugin-vue": "^9.16.1",
    "npm-run-all": "^4.1.5",
    "prettier": "^3.0.0",
    "sass": "^1.69.3",
    "sass-loader": "^13.3.2",
    "typescript": "~5.1.6",
    "vite": "4.5.0",
    "vite-plugin-native": "^0.2.0",
    "vue-tsc": "^1.8.8"
  }
}

Not sure what is happening here, and what else I could try.

Answer 1

After looking around my codebase, it turns out there was an unused import in one of my typescript files causing this issue:

import vue from "@vitejs/plugin-vue";

I removed this unused import and my project is able to build successfully!