Eslint-plugin-jsx-a11y: Cannot find definitions for rules

[dagda1]

My .eslintrc file looks like this:

  "extends": [
    "prettier",
    "prettier/flowtype",
    "prettier/react",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": [
    "prettier"
  ],

When I start my app I get errors like this:

./src/index.js
  Line 1:  Definition for rule 'jsx-a11y/media-has-caption' was not found                              jsx-a11y/media-has-caption
  Line 1:  Definition for rule 'jsx-a11y/accessible-emoji' was not found                               jsx-a11y/accessible-emoji
  Line 1:  Definition for rule 'jsx-a11y/anchor-has-content' was not found                             jsx-a11y/anchor-has-content
  Line 1:  Definition for rule 'jsx-a11y/aria-activedescendant-has-tabindex' 
was not found             jsx-a11y/aria-activedescendant-has-tabindex
etc. etc.

The relevant parts of my package.json are:

  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.1"
  },
  "devDependencies": {
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.0.0",
    "babel-preset-react-app": "^3.0.0",
    "babel-runtime": "6.23.0",
    "eslint": "^3.19.0",
    "eslint-config-prettier": "^2.2.0",
    "eslint-config-react-app": "^1.0.4",
    "eslint-loader": "1.7.1",
    "eslint-plugin-flowtype": "2.33.0",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "eslint-plugin-prettier": "^2.1.2",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-react": "7.0.1",
  },

[ljharb]

Does npm ls exit zero? (Until you have a valid dep graph, nothing can be expected to work reliably)

[dagda1]

Actually I tell a lie, even with npm ls exiting with 0, it still cannot find the definitions

[evcohen]

yarn why eslint-plugin-jsx-a11y see which dependency is bringing in an incorrect version

[dagda1]

I'm new to yarn, I get the following output which would suggest all is ok:

yarn why v0.24.6
[1/4] 🤔  Why do we have the module "eslint-plugin-jsx-a11y"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
info Has been hoisted to "eslint-plugin-jsx-a11y"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "1.51MB"
info Disk size with unique dependencies: "3.43MB"
info Disk size with transitive dependencies: "4.1MB"
info Number of shared dependencies: 13
✨  Done in 0.93s.

[ljharb]

Generally starting the app shouldn't be running linting; what's your npm start script? Is it possible the thing running linting is using a global eslint? If you npm uninstall -g eslint, does it behave the same?

[dagda1]

Same deal after globally uninstalling eslint.

The app was created using create-react-app so it is their start script.

[jessebeach]

@dagda1 Your issue may have been fixed in https://github.com/facebookincubator/create-react-app/pull/2690

[iamcdonald]

@dagda1 hey buddy,

just hit this too, I added jsx-a11y to the plugins and that seemed to sort it.
So I guess in your .eslintrc file:

  "extends": [
    "prettier",
    "prettier/flowtype",
    "prettier/react",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": [
    "prettier",
    "jsx-a11y"
  ]

Admittedly I'm not using facebookincubator/create-react-app
but this seems to suggest the same thing.

hope that helps,

Iain

[dagda1]

@iamcdonald thanks mate, I owe you a milkyway

[ljharb]

Should this be closed then?

[dagda1]

apologies, yes