Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Sayvai opened this issue May 7, 2017 · 26 comments

Comments

Projects
None yet
8 participants
@Sayvai
Copy link

commented May 7, 2017

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).
jsx-a11y-bug-img-has-alt

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

This comment has been minimized.

Copy link
Collaborator

commented May 7, 2017

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.

@ljharb ljharb closed this May 7, 2017

@Sayvai

This comment has been minimized.

Copy link
Author

commented May 7, 2017

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

This comment has been minimized.

Copy link

commented May 16, 2017

@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:
image

plus in VSCode the same error as I mentioned above

@stepankuzmin

This comment has been minimized.

Copy link

commented May 16, 2017

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

@ljharb

This comment has been minimized.

Copy link
Collaborator

commented May 16, 2017

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

@stepankuzmin

This comment has been minimized.

@evcohen

This comment has been minimized.

Copy link
Owner

commented May 16, 2017

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

@stepankuzmin

This comment has been minimized.

Copy link

commented May 16, 2017

@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]
  }
}
@evcohen

This comment has been minimized.

Copy link
Owner

commented May 16, 2017

can you post your package.json as well?

@ljharb

This comment has been minimized.

Copy link
Collaborator

commented May 16, 2017

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

This comment has been minimized.

Copy link

commented May 16, 2017

@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

This comment has been minimized.

Copy link
Collaborator

commented May 16, 2017

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

@stepankuzmin

This comment has been minimized.

Copy link

commented May 16, 2017

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

@evcohen

This comment has been minimized.

Copy link
Owner

commented May 16, 2017

@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

This comment has been minimized.

Copy link

commented May 16, 2017

@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

This comment has been minimized.

Copy link
Collaborator

commented May 16, 2017

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

@LorneCurrie

This comment has been minimized.

Copy link

commented Oct 3, 2017

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

This comment has been minimized.

Copy link
Collaborator

commented Oct 3, 2017

@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

This comment has been minimized.

Copy link

commented Oct 6, 2017

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

This comment has been minimized.

Copy link
Collaborator

commented Oct 6, 2017

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

This comment has been minimized.

Copy link

commented Oct 6, 2017

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

This comment has been minimized.

Copy link
Collaborator

commented Oct 6, 2017

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

This comment has been minimized.

Copy link

commented Apr 20, 2018

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

@ljharb

This comment has been minimized.

Copy link
Collaborator

commented Apr 20, 2018

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

@axhamre

This comment has been minimized.

Copy link

commented Apr 20, 2018

@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

This comment has been minimized.

Copy link
Collaborator

commented Apr 20, 2018

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.