error Parsing error: Unexpected token, expected ","

Question

I get an error when I run the program (vue3 + elements plus), but I don't know what's wrong with it. please help me.

Here is the error description and picture:

56:23 error Parsing error: Unexpected token, expected "," (11:23)

---

enter link description here

---

package.json

{
  "name": "vueui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "element-plus": "^2.1.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.17.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

Answer 1

My issue was caused by find. Vue error message is not help full

 <p v-if="clients" class="text-sm text-gray-400">
     No open or available details for 
    {{ clients.find((c: IClient) => c.id === selectedValue)[0]}}
 </p>

I made a mistake find will return IClient object not an array

Solution: Double check your code

 <p v-if="clients" class="text-sm text-gray-400">
         No open or available details for 
        {{ clients.find((c: IClient) => c.id === selectedValue)?.company }}
     </p>

Answer 2

In the current configuration, eslint cannot deal with TypeScript. The following steps enable TypeScript support.

• Run npm install --save-dev @vue/eslint-config-typescript
• Adapt the ESLint config:
  • Remove "parser": "@babel/eslint-parser" from the parserOptions
  • Add "@vue/typescript/recommended" to the extends key

Based on your file above, it would look like this:

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/typescript/recommended"
  ],
  "parserOptions": {},
  "rules": {}
}

Depending on your ESLint version, the installation of @vue/eslint-config-typescript might result in a dependency conflict. With ESLint < 9 you'll have to install @vue/eslint-config-typescript@10

Answer 3

If Code Works Then You need to configure esLint if it throw an error then u need to place correctlly place it between {}