In WebStorm, every ts file in my project shows the error:
SyntaxError: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.cjs » @vue/eslint-config-typescript': Unexpected token '||='
like this:
Full stacktrace is:
SyntaxError: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.cjs » @vue/eslint-config-typescript': Unexpected token '||='
Referenced from: /Users/kio/Projects/ctc/living-environment-web/node_modules/.pnpm/registry.npmmirror.com+@[email protected][email protected][email protected][email protected]/node_modules/@vue/eslint-config-typescript/index.js
/Users/kio/Projects/ctc/living-environment-web/node_modules/.pnpm/registry.npmmirror.com+@[email protected]/node_modules/@typescript-eslint/scope-manager/dist/referencer/ClassVisitor.js:123
withMethodDecorators ||=
^^^
SyntaxError: Unexpected token '||='
at wrapSafe (internal/modules/cjs/loader.js:1001:16)
at Module._compile (internal/modules/cjs/loader.js:1049:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:101:18)
at Object.<anonymous> (/Users/kio/Projects/ctc/living-environment-web/node_modules/.pnpm/registry.npmmirror.com+@[email protected]/node_modules/@typescript-eslint/scope-manager/dist/referencer/Referencer.js:20:24)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
.eslintc.cjs file
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
},
rules: {
'vue/multi-word-component-names': 0
}
}
package.json file:
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@element-plus/icons-vue": "^2.1.0",
"@szxc/apis": "workspace:^",
"@szxc/components": "workspace:^",
"@szxc/http": "workspace:^",
"@types/crypto-js": "^4.1.2",
"@types/qs": "^6.9.8",
"@vueuse/core": "^10.5.0",
"autoprefixer": "^10.4.16",
"axios": "^1.5.1",
"crypto-js": "^4.1.1",
"element-plus": "^2.3.14",
"gcoord": "^1.0.5",
"jsencrypt": "^3.3.2",
"moment": "^2.29.4",
"pinia": "^2.1.6",
"pinia-plugin-persist": "^1.0.0",
"postcss-plugin-px2rem": "^0.8.1",
"qs": "^6.11.2",
"sass": "^1.69.0",
"sass-loader": "^13.3.2",
"vue": "^3.3.4",
"vue-router": "^4.2.4"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.3",
"@tsconfig/node18": "^18.2.2",
"@types/node": "^20.8.6",
"@vitejs/plugin-vue": "^4.3.4",
"@vitejs/plugin-vue-jsx": "^3.0.2",
"@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^12.0.0",
"@vue/tsconfig": "^0.4.0",
"eslint": "^8.49.0",
"eslint-plugin-vue": "^9.17.0",
"npm-run-all2": "^6.0.6",
"prettier": "^3.0.3",
"typescript": "~5.2.0",
"unplugin-auto-import": "^0.16.6",
"unplugin-vue-components": "^0.25.2",
"vite": "^4.4.9",
"vue-tsc": "^1.8.11"
}
I added two dependencies:
{
"@typescript-eslint/eslint-plugin": "^6.7.0",
"@typescript-eslint/parser": "^6.7.0"
}
and didn't fix the error.
Then I upgraded the eslint-plugin-vue to "^9.18.0"
{
"eslint-plugin-vue": "^9.17.0",
}
useless as well.
What Node.js interpreter version do you have selected in Settings | Languages & Frameworks | Node.js? Looks like it doesn't support logical OR assignment (
||=) operator. Node.js 15 or greater is required,please see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment#browser_compatibility