Eslint-plugin-jsx-a11y: <Link> require anchor-is-valid

[minhqp]

I recently updated eslint, and reinstalled all the lastest update of packages which following by Airbnb style. After updated, I got new error: Link component required a valid anchor.
The error will be disappeared if I add href props, but as you know, Link component always only go with to props. I already checked peer dependencies by npm ls and it shows nothing incompatible here.
Here's my package.json:

    "eslint": "^4.8.0",
    "eslint-config-airbnb": "^16.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0"

If I roll back "eslint-config-airbnb": "^15.1.0" and "eslint-plugin-jsx-a11y": "^5.1.1", then everything work back, no error show.
Don't both of new version of eslint-plugin-js-a11y and eslint-config-airbnb incompatible?

[ljharb]

When npm ls exits nonzero, you can't expect anything to work.

The "valid anchor" error is correct; for react-router's Link, you'll need to configure the rule to set the "specialLink" property to include "to", so it knows you've provide a valid href to the link.

[minhqp]

Hi Jordan,
Thanks for fast replying!
Probably your solution will handle my problem, but I just curious
something.
Here's my package.json before update:
"eslint": "^4.7.1",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.3.0",
And after updated:
"eslint": "^4.8.0",
"eslint-config-airbnb": "^16.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.4.0",
Before update, I have no error. After updated, error appeared as I
mentioned. The error only disappear after I reinstalled
[email protected] and [email protected].
As you can see, eslint-plugin-import before and after update have nothing
change. So I just guessed the issue come from eslint-config-airbnb and
eslint-plugin-jsx-a11y.

[ljharb]

The issue is that eslint-config-airbnb enabled a new eslint-plugin-jsx-a11y rule; that rule by default correctly reports an error on all react-router Link usages.

eslint-config-airbnb does not have any special react-router configuration; as such, you will have to (along with the v16 eslint-config-airbnb upgrade) manually configure the anchor-is-valid rule with specialLink: ['to'] (see the rule docs for details).

[minhqp]

Ok, I got it. Thank you so much!

On Wed, Oct 11, 2017 at 2:35 PM, Jordan Harband [e-mail]
wrote:

The issue is that eslint-config-airbnb enabled a new
eslint-plugin-jsx-a11y rule; that rule by default correctly reports an
error on all react-router Link usages.

eslint-config-airbnb does not have any special react-router configuration;
as such, you will have to (along with the v16 eslint-config-airbnb upgrade)
manually configure the anchor-is-valid rule with specialLink: ['to'] (see
the rule docs for details).

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/341#issuecomment-335712292,
or mute the thread
https://github.com/notifications/unsubscribe-auth/APXw4lGMp-I-YkuiQY1H6P43ftuYAgFtks5srG_ZgaJpZM4P1AVD
.

[minhqp]

Here's what you need, simple just add new rule which you want in rules object in .eslintrc.js file.

module.exports = {
  "env": {
    "browser": true
  },
  "extends": "airbnb",
  "parser": "babel-eslint",
  "globals": {
    "require": true
  },
  "rules": {
    "jsx-a11y/anchor-is-valid": [ "error", {
      "components": [ "Link" ],
      "specialLink": [ "hrefLeft", "hrefRight", "to" ],
      "aspects": [ "noHref", "invalidHref", "preferButton" ]
    }]
  }
};

[skube]

FYI, here's a link to the rules docs

Seems to work for me with just:

"rules": {
  "jsx-a11y/anchor-is-valid": [ "error", {
    "components": [ "Link" ],
    "specialLink": [ "to" ]
  }],
}