Develop Reference

error Parsing error: Unexpected token, expected ","

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

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

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

Failed to load plugin 'vue' declared in 'package.json'

Failed to load plugin 'vue' declared in 'package.json': Package subpath './lib/rules/array-bracket-spacing' is not defined by "exports" in C:\Users\<my_username>\FolderX\Subfolder\<appname>\eslint\package.json
Referenced from: C:\Users\<my_username>\FolderX\Subfolder\<appname>\package.json
That's the error I'm getting every time I npm run serve I've upated eslint, added prettier and fixed most of my vulnerability problems, and it still persists. I've combed the eslint issues on github and there is nothing like this, some issues are similar but they refer to eslintrc. Nothing is matching this exactly. I should mention that the app itself is very small and simple. It was supposed to be the start of a project but when I was adding views to the project, this happened.
package.json
"name": "online-birth-registration-system",
"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.6.5",
"vue": "^2.6.11",
"vue-router": "^4.0.14"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^5.0.3",
"#vue/cli-plugin-eslint": "^5.0.1",
"#vue/cli-service": "^5.0.3",
"babel-eslint": "^10.1.0",
"eslint": "^8.11.0",
"eslint-plugin-vue": "^6.2.2",
"prettier-eslint": "^13.0.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Any help would be greatly appreciated.

I ran into the same issue with array-bracket-spacing and was able to fix it by downgrading eslint in my package.json from "^8.6.0" to "^7.32.0". None of the other suggested fixes worked for me either

Upgraded eslint-plugin-vue to 9.1.1
Solved it for me

Resolve eslint(node/no-unsupported-features/es-syntax) - How to support JavaScript modules in ESLint?

I'm writing a game in JavaScript/ Redux. I'm unable to configure my .eslintrc.json file so that it supports the latest JavaScript syntax - I get a message saying
"Import and export declarations are not supported yet" eslint(node/no-unsupported-features/es-syntax).
I've read the official configuration docs for ESLint and tried (I thought all) combinations over the past few hours (changing environments, ecmaVersions, parsers and parser options).
The latest thing I've tried is to install a babel-eslint parser and so at the moment my .eslintrc.json looks like this:
{
"extends": ["airbnb-base", "prettier", "plugin:node/recommended"],
"plugins": ["prettier"],
"env": {
"es2020": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module"
},
"rules": {
"prettier/prettier": "error"
}
}
And my package.json:
{
"name": "astroman-game",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open",
"eslint": "eslint ./"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"eslint": "^6.1.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-node": "^4.0.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.2",
"prettier": "^1.19.1",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
},
"dependencies": {
"redux-starter-kit": "^0.6.3"
}
}
But it also didn't solve the problem.
I appreciate your help!

You are extending from plugin:node/recommended which is for NodeJS. Node only supports require() which are CommonJS-style imports. There is no reason for your frontend application to be using this set of recommendations.
Remove plugin:node/recommended from the extends list
"extends": ["airbnb-base", "prettier"],

eslint not linting though server is running

I downloaded a frontend template online and yarn installed all packages and an .eslint.json file does exist and the extension is installed in Visual Studio Code but it does not show any linting errors.
Here is my .eslint.json file
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true,
"experimentalObjectRestSpread": true
}
},
"extends": [
"airbnb",
"prettier",
"prettier/react",
"plugin:flowtype/recommended"
],
"plugins": ["flowtype", "react"],
"env": {
"browser": true,
"node": true,
"jest": true
},
"rules": {
"import/no-extraneous-dependencies": ["error", { "packageDir": "./" }],
"jsx-a11y/anchor-is-valid": [
"error",
{
"components": ["Link"],
"specialLink": ["to"]
}
]
}
}
Here is my package.json file
{
"name": "reactjs-template",
"version": "0.1.0",
"private": true,
"dependencies": {
"eslint-plugin-prettier": "^3.1.1",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:auto": "mocha test",
"eject": "react-scripts eject",
"lint": "eslint src --ext .js,.jsx",
"flow": "flow"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-flow": "^6.23.0",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^6.6.0",
"eslint-plugin-flowtype": "^3.2.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"flow-bin": "0.83.0",
"flow-typed": "^2.5.1",
"mocha": "^5.2.0",
"prettier": "^1.19.1",
"selenium-webdriver": "^4.0.0-alpha.1"
}
}
here is my settings.json file
{
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "choseToUpdateConfiguration",
"eslint.packageManager": "yarn",
"javascript.autoClosingTags": false,
"javascript.format.enable": false,
"javascript.format.insertSpaceAfterCommaDelimiter": false,
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": false,
"javascript.format.insertSpaceAfterSemicolonInForStatements": false,
"javascript.format.insertSpaceBeforeAndAfterBinaryOperators": false,
"typescript.tsc.autoDetect": "off",
"files.eol": "\n",
"prettier.endOfLine": "lf",
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"eslint.alwaysShowStatus": true,
"eslint.lintTask.enable": true,
"eslint.run": "onSave",
"eslint.autoFixOnSave": true
}
The template I downloaded is a personal one for a company but here is the package.json to see what it entails

If and not missing something, to make it work follow or check you did the next steps:
Download ESLint and Prettier extensions for VSCode if you didn't
Install ESlint and Prettier libraries in your project npm install -D eslint prettier (or use yarn)
Install eslint-config-prettier (disables formatting for ESLint) and eslint-plugin-prettier (allows ESLint to show formatting errors as we type) npm install -D eslint-config-prettier eslint-plugin-prettier
After that and if all your dependencies are installed taking in consideration your eslintrc file, you should be able to restart vscode and see the errors in the editor directly.
Note that this is something "generic" and you may need to install more packages to add more validations.

Failing to browse React application deployed to Heroku

When wirite https://tictactoesko.herokuapp.com/ in a browser then I
recive folowing error message:
Failed to compile ./src/index.js Module build failed: Error: Cannot
find module 'eslint/lib/formatters/stylish'
My index.js look like this
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import Game from './Game'
ReactDOM.render(, document.getElementById('root'))
My package.json looks like this
{
"name": "tic-tac-toe",
"version": "0.1.0",
"private": true,
"eslintConfig": {
"env": {
"es6": true
},
"parserOptions": {
"ecmaVersion": 8,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"extends": [
"standard",
"react-app",
"plugin:jsx-a11y/recommended"
],
"plugins": [
"jsx-a11y",
"react"
],
"rules": {
"no-trailing-spaces": "off",
"padded-blocks":"off",
"jsx-a11y/href-no-hash":"off"
}
},
"jest": {
"testMatch": [
"**/test/**/*.js?(x)"
],
"collectCoverage": true,
"coverageDirectory": "coverage",
"coverageThreshold": {
"global": {
"branches": 100,
"functions": 100,
"lines": 100,
"statements": 100
}
}
},
"dependencies": {
"chromedriver": "^2.35.0",
"jest-cli": "^22.3.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1",
"selenium-webdriver": "^4.0.0-alpha.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"lint": "./node_modules/.bin/eslint src/** test/** ",
"test": "jest",
"eject": "react-scripts eject",
"cypress:open": "cypress open"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"babel-jest": "^22.2.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"cypress": "^2.0.3",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.18.1",
"eslint-config-google": "^0.9.1",
"eslint-config-react-app": "^2.1.0",
"eslint-config-standard": "^11.0.0",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-react": "^7.7.0",
"eslint-plugin-standard": "^3.0.1",
"jest": "^22.3.0",
"react-test-renderer": "^16.2.0"
}
}
Here is the travis.yml
language: node_js node_js:
- node addons: sonarcloud: before_script:
- npm start -- --silent & script:
- npm run lint
- npm test
- sonar-scanner -Dsonar.projectKey=TicTacToe -Dsonar.organization=steinko-github -Dsonar.sources=src,test -Dsonar.host.url=https://sonarcloud.io -Dsonar.login=6472ac35c070752487408fd8c946cca6b536eec2 -Dsonar.javascript.lcov.reportPaths=coverage/lcov.info
- $(npm bin)/cypress run --record --key a1319fd9-2c6e-4888-8f02-e62f02b5001b deploy: provider: heroku
api_key:
secure: iHZKdF2ZoiXshgTeDfAR8YjhChchFLMSAxU9i62eB/XGzj6VQ2iV9RS9OnD+dfOJAebk40rtEbyxv9Vx4RXBsWCNVMifg6rMoAiW9Bp3Us8Idw5f2kLKD0Sx6qzNZqdn9TzQT3EU12jLjIgpUse9PfJxisd/HZqmtdYQdJCMGcgOZk4lZJmbpe8tmCcU0tnUPxJnuDPUzkrViAK3pe/t8/m1mdZAZ4+2mAIXuJzsf//JJimdwIE3ZqSoxQjEo9l4QmXcdStrC3iAx+GLgjt2j9Rf0ERnuKYPdfSxPUw8O4/tJHEyF32E+mUPNxX1PvEyzkP6NtBss/288W0NPg42rxilEivNeJxWS8fGgUyQx52dHXcBZEdPOsye233WtEHvlIYzDj2Gp+IqD6Q2PhptobqK7XJuyM7xS3QH8Yao/JB2ZYz9PnZzngsfC3cohgxFJ3YjWVmfy87Y/BB5JBVAXARMwg6zvKKt+lHdsVbR3CcHN01S9wG4YgdiAViaIa5vEOUcI7OCGRdYlyJTKau4ENj/DahPxG+L7+wbrx292kL/9zgg0fINaByBOg+YSJN/OMQOphNMQZR/gUpf/N1T6uZVogH+ZgzY7XXtSRI3EFl4GgIcHFxoNulvNRmJOR04sK0cyznuwifmLjGiuxGCUeI9MUbSoAiNws7KrK6i9uw=
app: tictactoesko
And the deployment log feom Heroku looks like this
Building dependencies
Installing node modules (package.json + package-lock)
up to date in 11.521s
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 57.4M
-----> Launching...
Released v11
https://tictactoesko.herokuapp.com/ deployed to Heroku
When wirite https://tictactoesko.herokuapp.com/ in a browser then I
recive folowing error message:
Failed to compile ./src/index.js Module build failed: Error: Cannot
find module 'eslint/lib/formatters/stylish'
How could i correct this error?

You installed eslint manually and this can break things. You should uninstall it and edit just your .eslintrc file. Look the comments of #gaearon in this Github issue
But if you wish to control directly and customize everything. I would eject the project: npm run eject. Check the guide of Create React App.