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.

[beefancohen]

@stepankuzmin i think it's actually react-scripts thats pulling in eslint-config-react-app. This should be resolved when facebook/create-react-app#2163 is published!

[knowbody]

@ljharb here it is:

{
  "name": "eedi-styleguide",
  "version": "0.1.0",
  "main": "./src/lib/index.js",
  "private": true,
  "devDependencies": {
    "@kadira/react-storybook-addon-info": "^3.4.0",
    "@kadira/storybook": "^2.21.0",
    "@kadira/storybook-addon-knobs": "^1.7.1",
    "@kadira/storybook-addon-options": "^1.0.2",
    "@kadira/storybook-addons": "^1.6.1",
    "@kadira/storybook-deployer": "^1.2.0",
    "babel-eslint": "^7.2.3",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.0.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jest": "^20.0.0",
    "eslint-plugin-jsx-a11y": "^5.0.1",
    "eslint-plugin-react": "^7.0.1",
    "flow-bin": "^0.46.0",
    "react-storybook-addon-backgrounds": "^0.0.7"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "styled-components": "2.0.0-16"
  },
  "scripts": {
    "lint": "eslint src",
    "storybook": "start-storybook -p 9009 -s public",
    "deploy-storybook": "storybook-to-ghpages",
    "build-storybook": "build-storybook -s public"
  }
}

[ljharb]

@knowbody and does npm ls && npm run lint pass?

[LorneCurrie]

So I am not sure if this would help anyone, but as a FYI, set my package.json devDependancies to the following as a work around:

"devDependencies": {
    "babel-eslint": "^7.2.3",
    "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",
...
}

[ljharb]

@LorneCurrie you should try eslint 4; but also if you use the install command in the readme for eslint-config-airbnb, you'll get all the proper peer dep versions.

[alesmenzel]

I am still getting the warning:
[eslint] Definition for rule 'jsx-a11y/href-no-hash' was not found (jsx-a11y/href-no-hash)

Those are my dependencies:

    "eslint": "^4.8.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.1.0"

I have installed eslint 4.8. because the airbnb base config requires at least 4.5 even though your installation instructions suggest installing 4.3 (see below).

> npm info "eslint-config-airbnb@latest" peerDependencies

{ eslint: '^3.19.0 || ^4.3.0',
  'eslint-plugin-jsx-a11y': '^5.1.1',
  'eslint-plugin-import': '^2.7.0',
  'eslint-plugin-react': '^7.1.0' }

[ljharb]

That notation means "at least 4.3, but not 5+". If you use the install command in the readme, you'll get the proper versions of everything.

[alesmenzel]

Yes, thank you, i know that.
The issue was actually not with the packages but in my editor (VS Code) as it was not configured properly.
So the only thing that bugs me are those messages:
Which should be save to ignore, any progress on that?

can't resolve reference #/definitions/basicConfig from id #
can't resolve reference #/definitions/basicConfigOrBoolean from id #
can't resolve reference #/definitions/basicConfigOrBoolean from id #

[ljharb]

If you rerun the install command in the readme, you should get the newest version of eslint-plugin-react, which will solve this issue.

[axhamre]

I'm on the latest version of eslint-plugin-react (7.7.0) and this is still an issue...

[ljharb]

@hundsim this repo is for eslint-plugin-jsx-a11y

[axhamre]

@ljharb Yes, I know. I mentioned eslint-plugin-react because you stated that getting latest version of eslint-plugin-react could solve the issue with eslint-plugin-jsx-a11y. And in my case, it didn't.

[ljharb]

@hundsim Specifically, I said that getting the latest version of everything the airbnb config requires (including the airbnb config itself) would solve the problem. Are you on the latest eslint, airbnb config, and is npm ls exiting successfully?

[Alluisio]

add in the file.eslintrc.json

{ ... "extends": [ ...., "airbnb" ], ,... }