javascript: Failed to load plugin 'jsx-a11y' declared '/.eslintrc » eslint-config-airbnb

@kacperborkowski - did you try installing eslint and its dependencies at the top level of the project you’re loading in Code? eg if your structure is:

/Users/user/Documents/GitHub/app/frontend/

But you’re loading all of /app into VS Code as a project, you’ll need to install ESlint and all the dependencies in /app. It’s not going to work if you only have ESlint and the deps installed in /frontend, unless you only load that folder (and sub-folders) in as the top level of the project.

For other people not wanting to reinstall all their npm dependencies: Edit the settings.json of your workspace and add "eslint.workingDirectories":["{YOUR_FOLDER}"] to the "settings" object.

If anyone else ends up here with this error, I’m embarrassed to say that in my case, I had manually typed a11y as “ally” with the letter “l” in my eslintrc.

@kacperborkowski - did you try installing eslint and its dependencies at the top level of the project you’re loading in Code? eg if your structure is:

/Users/user/Documents/GitHub/app/frontend/

But you’re loading all of /app into VS Code as a project, you’ll need to install ESlint and all the dependencies in /app. It’s not going to work if you only have ESlint and the deps installed in /frontend, unless you only load that folder (and sub-folders) in as the top level of the project.

You sir, just fixed my whole life ❤️

@kacperborkowski - did you try installing eslint and its dependencies at the top level of the project you’re loading in Code? eg if your structure is:

/Users/user/Documents/GitHub/app/frontend/

But you’re loading all of /app into VS Code as a project, you’ll need to install ESlint and all the dependencies in /app. It’s not going to work if you only have ESlint and the deps installed in /frontend, unless you only load that folder (and sub-folders) in as the top level of the project.

Ok, it’s worked. Thanks.

-delete node modules and package-lock.json

• npm install --force

I did this and the issue was resolved. Basically, I ran his command in my work directory:

rm -r node_modules/ && rm package-lock.json && npm i -f and that was all.

Hope this helps someone.

-delete node modules and package-lock.json

• npm install --force

@ljharb - Ah. Yes, it might be a VS code issue, then. If I manually run eslint, like this:

../node_modules/eslint/bin/eslint.js ChartDisplay.js

Then it correctly outputs some lint errors. I’ll set up an auto-linting on save script so I can at least see the output in the console. Hopefully VS Code will fix the issue soon.

eta: Thanks for the info!

I am having the same issue but this solution doesn’t make sense for me. Just working in a simple create-react-app. I have not touched any related to ESLINT and my project was working fine last night but yet when I opened my project this morning this error appeared…

No higher level project folders and I’m opening directly into the CRA through VSCODE

Global configs are deprecated in eslint. Everything should be only installed, and configured, per-project.

@karanalpe why do you have an eslint config inside your Documents folder, instead of in each individual project?

Thanks for the answer. After many attempts. I managed to solve the problem.

When I installed the extension esLint and prettier at vsCode, was enabled globally (/Users/macbook/Documents/).

For resolved my problem, I set the parameter root = true in .eslintrc.js. That way eslint started to capture the file correctly. Look:

[Info  - 1:02:29 PM] ESLint server is starting
[Info  - 1:02:30 PM] ESLint server running in node v12.18.3
[Info  - 1:02:30 PM] ESLint server is running.
[Info  - 1:02:34 PM] ESLint library loaded from: /Users/macbook/Documents/dev/git/curso-fullstack-back-final/node_modules/eslint/lib/api.js

Wrong Karan 😁 cc: @karanalpe

I am having the same issue but this solution doesn’t make sense for me. Just working in a simple create-react-app. I have not touched any related to ESLINT and my project was working fine last night but yet when I opened my project this morning this error appeared…

No higher level project folders and I’m opening directly into the CRA through VSCODE

The same error here. I tried many things

• Add eslint.workingDirectories (auto and project)
• Downgraded version
• Change local .eslintrc.js to /src
• Reinstall VsCode and Plugins
• …

I’m using:

• macOs 10.15.7
• vsCode 1.54.2 (Universal)
• ESLint plugin vsCode 2.1.17
• Prettier plugin vsCode 6.2.0
• package.json

{
  "name": "curso-node-typescript",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "nodemon src/server.ts",
    "build": "sucrase ./src -d ./dist --transforms typescript,imports"
  },
  "devDependencies": {
    "@types/cors": "^2.8.9",
    "@types/express": "^4.17.9",
    "@types/mongoose": "^5.10.3",
    "@typescript-eslint/eslint-plugin": "^4.10.0",
    "@typescript-eslint/parser": "^4.10.0",
    "eslint": "^7.15.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.22.1",
    "nodemon": "^2.0.6",
    "sucrase": "^3.16.0",
    "typescript": "^4.1.3"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "eslint-config-prettier": "^7.0.0",
    "eslint-import-resolver-typescript": "^2.3.0",
    "eslint-plugin-prettier": "^3.3.0",
    "express": "^4.17.1",
    "mongoose": "^5.11.8",
    "prettier": "^2.2.1"
  }  
}

• .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'airbnb-base',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint'],
  rules: {
    'linebreak-style': 0,
    'no-console': 'off',
    'class-methods-use-this': 'off',
    'max-len': 'off',
    'no-unused-vars': 'off',
    'no-shadow': 'off',
    'consistent-return': 'off',
    'lines-between-class-members': 'off',
    'no-use-before-define': 'off',
    'no-param-reassign': 'off',
    'no-undef': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-unused-vars': 'off',
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
  },
  settings: {
    'import/resolver': {
      typescript: {},
    },
  },
};

Look this error:

[Info  - 8:28:42 AM] ESLint server is starting
[Info  - 8:28:43 AM] ESLint server running in node v12.18.3
[Info  - 8:28:43 AM] ESLint server is running.
[Info  - 8:28:46 AM] ESLint library loaded from: /Users/macbook/Documents/dev/git/curso-fullstack-back-template/node_modules/eslint/lib/api.js
[Error - 8:28:48 AM] 
Failed to load plugin '@typescript-eslint' declared in '../../../../.eslintrc.js': Cannot find module '@typescript-eslint/eslint-plugin'
Require stack:
- /Users/macbook/Documents/__placeholder__.js
Referenced from: /Users/macbook/Documents/.eslintrc.js
Happened while validating /Users/macbook/Documents/dev/git/curso-fullstack-back-template/src/app.ts
This can happen for a couple of reasons:
1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure '@typescript-eslint/eslint-plugin' is installed globally as well.
3. If ESLint is installed locally, then '@typescript-eslint/eslint-plugin' isn't installed correctly.

Consider running eslint --debug /Users/macbook/Documents/dev/git/curso-fullstack-back-template/src/app.ts from a terminal to obtain a trace about the configuration files used.
[Error - 8:28:49 AM] 
Failed to load plugin '@typescript-eslint' declared in '../../../.eslintrc.js': Cannot find module '@typescript-eslint/eslint-plugin'
Require stack:
- /Users/macbook/Documents/__placeholder__.js
Referenced from: /Users/macbook/Documents/.eslintrc.js
Happened while validating /Users/macbook/Documents/dev/git/curso-fullstack-back-template/.eslintrc.js
This can happen for a couple of reasons:
1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure '@typescript-eslint/eslint-plugin' is installed globally as well.
3. If ESLint is installed locally, then '@typescript-eslint/eslint-plugin' isn't installed correctly.

Consider running eslint --debug /Users/macbook/Documents/dev/git/curso-fullstack-back-template/.eslintrc.js from a terminal to obtain a trace about the configuration files used.

I NEED HELP

I did not get the solution of top level folder and blah blah blah. I mean I did not understand. Anyone please explain a bit more. In my case I have a simple react folder template E:/react/my app/ and all src, node modules public lies in the given file path.

@kacperborkowski - did you try installing eslint and its dependencies at the top level of the project you’re loading in Code? eg if your structure is:

/Users/user/Documents/GitHub/app/frontend/

But you’re loading all of /app into VS Code as a project, you’ll need to install ESlint and all the dependencies in /app. It’s not going to work if you only have ESlint and the deps installed in /frontend, unless you only load that folder (and sub-folders) in as the top level of the project.

Thank you! I confirm that this worked for me too! just launched a yarn init at the root of my repo, copied the code below and then typed yarn

{
  "name": "serialkiller",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "git@github.com:O-clock-Universe/projet-SerialKiller.git",
  "author": "Abibibi <abeba.ngwe@gmail.com>",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "*",
    "@babel/plugin-proposal-class-properties": "*",
    "@babel/plugin-proposal-object-rest-spread": "*",
    "@babel/preset-env": "*",
    "@babel/preset-react": "*",
    "@babel/register": "*",
    "autoprefixer": "*",
    "babel-eslint": "*",
    "babel-loader": "*",
    "chai": "*",
    "css-loader": "*",
    "enzyme": "*",
    "enzyme-adapter-react-16": "*",
    "eslint": "*",
    "eslint-config-airbnb": "*",
    "eslint-import-resolver-webpack": "*",
    "eslint-plugin-import": "*",
    "eslint-plugin-jsx-a11y": "*",
    "eslint-plugin-react": "*",
    "file-loader": "*",
    "html-webpack-plugin": "*",
    "ignore-styles": "*",
    "mini-css-extract-plugin": "*",
    "mocha": "*",
    "node-sass": "*",
    "optimize-css-assets-webpack-plugin": "*",
    "postcss": "*",
    "postcss-loader": "*",
    "sass-loader": "*",
    "style-loader": "*",
    "stylelint": "*",
    "stylelint-config-recommended": "*",
    "uglifyjs-webpack-plugin": "*",
    "webpack": "*",
    "webpack-cli": "*",
    "webpack-dev-server": "*"
},
  "scripts": {
    "test": "mocha --require tests/.setup.js tests/**/*.test.js",
    "test:watch": "mocha --watch --require tests/.setup.js tests/**/*.test.js",
    "start": "webpack-dev-server",
    "clean": "rm -rf dist",
    "clean:all": "rm -rf dist node_modules",
    "build:dev": "NODE_ENV=development webpack",
    "build:dev:win": "set NODE_ENV=development && webpack",
    "build:prod": "NODE_ENV=production webpack --mode production",
    "build:prod:win": "set NODE_ENV=production && webpack --mode production",
    "save-deps": "node updateDeps.js"
  }
}