First line of all JSX / JS files gives lint error 'jsx-a11y/img-has-alt' was not found

[Sayvai]

I'm not sure if my configuration is setup improperly, but i appear to be given many lint errors of one particular type on each and every JS / JSX file on the first line, regardless of whether or not my React component contains an <img/> element. The error i get is:

[eslint] Definition for rule 'jsx-a11y/img-has-alt' was not found (jsx-a11y/img-has-alt)

Attached below is a GIF of what i am seeing in my IDE (Visual Studio Code).

Below is a copy of my .eslintrc.json config:

{
    "extends": "airbnb",
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ]
}

Below is a snippet from package.json file of my devDependencies (with version numbers):

"devDependencies": {
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^5.0.0",
    "eslint-plugin-react": "^7.0.0"
}

Have i missed a step in the configuration, or is this a bug?

[ljharb]

The airbnb config is not yet compatible with v5 - it requires v4. Run npm ls and you'll see that your dependencies are invalid.

The readme for the Airbnb config has a command that installs the proper version of peer deps - that's the only way you should upgrade any of the peer deps the config requires.

[Sayvai]

Thanks @ljharb.

I downgraded the dependency down to eslint-plugin-jsx-a11y@^4.0.0, and the lint error [eslint] Definition for rule 'jsx-a11y/img-has-alt' was not found (jsx-a11y/img-has-alt) disappeared from all JS / JSX files.

The Yarn command i used to downgrade the dependency from ^5.0.0 to ^4.0.0 is set out below:

yarn upgrade eslint-plugin-jsx-a11y@^4.0.0 --dev

[knowbody]

@ljharb version 15.0.1 of eslint-config-airbnb requires eslint-plugin-jsx-a11y@^5.0.1 and I still run to the same issue having both of these packages above...

I installed everything via:

export PKG=eslint-config-airbnb;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add -D "$PKG@latest"

Edit

I actually removed all my node_modules and installed them again and I get:

plus in VSCode the same error as I mentioned above

[stepankuzmin]

@knowbody this issue is related to airbnb/javascript#1406 I think

[ljharb]

That suggests that the installed versions are wrong. What does npm ls say? What happens on the command line?

[stepankuzmin]

@ljharb

npm ls https://gist.github.com/stepankuzmin/fb644347d7e8a19a153030d53505722c

[beefancohen]

@stepankuzmin it seems like you are also using create-react-app which installs v4 of eslint-plugin-jsx-a11y

[stepankuzmin]

@evcohen that's correct, but my .eslintrc is using airbnb config:

{
  "extends": "airbnb",
  "plugins": [
    "import",
    "react"
  ],
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  },
  "rules": {
    "comma-dangle": ["error", "never"],
    "jsx-a11y/img-has-alt": [0],
    "jsx-quotes": ["error", "prefer-single"],
    "no-confusing-arrow": [0],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "react/jsx-no-bind": [0],
    "react/prop-types": [1],
    "react/require-default-props": [0]
  }
}

[beefancohen]

can you post your package.json as well?

[ljharb]

There are 8 npm errors there at the bottom - your deps are invalid. npm ls has to return zero, with no errors, before any project commands can be run.

[stepankuzmin]

@ljharb that's right. I'm going to downgrade eslint-config-airbnb and eslint-plugin-jsx-a11y to match create-react-app peerDeps versions.

@evcohen package.json

{
  "name": "velobike",
  "version": "0.2.0",
  "private": true,
  "scripts": {
    "commit": "git-cz",
    "release": "standard-version",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "node_modules/eslint/bin/eslint.js src",
    "docs": "documentation build src/* -o documentation -f html --github --name velobike"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "dependencies": {
    "@urbica/components": "1.1.2",
    "d3-array": "1.2.0",
    "d3-scale": "1.0.6",
    "d3-shape": "1.1.0",
    "d3-time": "1.0.6",
    "d3-time-format": "2.0.5",
    "debounce": "1.0.2",
    "history": "4.6.1",
    "immutable": "3.8.1",
    "moment": "2.18.1",
    "prop-types": "15.5.10",
    "ramda": "0.23.0",
    "react": "15.5.4",
    "react-csv": "1.0.8",
    "react-day-picker": "5.5.1",
    "react-dom": "15.5.4",
    "react-redux": "5.0.4",
    "react-router-dom": "4.1.1",
    "react-router-redux": "5.0.0-alpha.6",
    "react-select": "1.0.0-rc.4",
    "react-virtualized": "9.7.5",
    "redux": "3.6.0",
    "redux-immutable": "4.0.0",
    "redux-saga": "0.15.3",
    "reselect": "3.0.1",
    "styled-components": "1.4.6"
  },
  "devDependencies": {
    "commitizen": "2.9.6",
    "cz-conventional-changelog": "2.0.0",
    "documentation": "4.0.0-rc.1",
    "eslint": "3.19.0",
    "eslint-config-airbnb": "15.0.1",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-jsx-a11y": "5.0.1",
    "eslint-plugin-react": "7.0.1",
    "react-scripts": "0.9.5",
    "redux-logger": "3.0.1",
    "redux-mock-store": "1.2.3",
    "standard-version": "4.0.0"
  }
}

[ljharb]

create-react-app may still be incompatible with v15 of the Airbnb config.

[stepankuzmin]

That's right, thanks @ljharb! Sorry that I raised this issue again.