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
Related
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 {}
I have a freshly created project in vue.js, everything worked(homepage). Then I installed bootstrap-vue with these steps.
$ yarn add bootstrap bootstrap-vue.
$ npm install bootstrap bootstrap-vue --save.
But after installing bootstrap I'm getting stuck with this error:
-Error: Cannot find module '#vue/ref-transform'
any tips what can I do please?
this is my package.json
{
"name": "testProj",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^5.1.1",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#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"
]
}
Bootstrap Vue is not (yet) compatible with Vue 3.
Current plan is:
BootstrapVue v2:
Feature-freeze after v2.17.0
Only critical bugfixes and security updates
BootstrapVue v3:
Based on BootstrapVue 2.17.0
Vue.js v3 support
Bootstrap v4.x support
Release: Short after Vue.js v3 release
BootstrapVue v4:
Complete rewrite
Vue.js v3 support
Bootstrap v5 support
Release: No ETA yet
So yeh, its coming ;)
More info here: https://github.com/bootstrap-vue/bootstrap-vue/issues/5196
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"],
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.
I've duplicated a projects .eslintrc and package.json files, and only the first project gets linting. The second project doesn't show any errors.
I'm using sublime-linter, with the eslint mod.
I've set the syntax the same in both projects.
I've done an npm isntall
I've tried restarting sublime
on doing a comparison of the node_modules folders there is one descrepency, estravers-fb is installed in the project that works.
why would this not be installed in the other projects?
is there another command to properly install dev-dependancies other than npm isntall?
heres my package.json :
{
"name": "Read-hapi",
"version": "1.0.0",
"description": "learning the hapi framework",
"repository": "https://github.com/Pushplaybang/learning-hapi.git",
"main": "server.js",
"dependencies": {
"blipp": "^2.3.0",
"boom": "^3.1.2",
"cheerio": "^0.20.0",
"good": "^6.6.0",
"good-console": "^5.3.1",
"handlebars": "^4.0.5",
"hapi": "^13.0.0",
"inert": "^3.2.0",
"joi": "^8.0.3",
"reading-time": "^1.0.2",
"request-promise": "^2.0.1",
"text-stats": "0.0.3",
"valid-url": "^1.0.9",
"vision": "^4.0.1"
},
"devDependencies": {
"babel-eslint": "^5.0.0",
"eslint": "^2.3.0",
"eslint-config-airbnb": "^6.1.0",
"eslint-plugin-react": "^4.2.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Paul van Zyl",
"license": "ISC"
}
and heres my .eslintrc
{
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
"browser": true,
"node": true,
},
"rules": {
"no-unused-vars": 0,
"no-undef": 0,
}
}
any help would be appreciated.
Try downgrading ESLint to ~2.2.0 in your package.json or using the default Espree parser instead of babel-eslint. There's an incompatibility right now between ESLint 2.3.0 and babel-eslint. We're tracking progress in eslint/eslint#5476, and you can subscribe to that issue for updates.