Javascript: `jsx-a11y/href-no-hash` removal

[Misiur]

Hello. jsx-a11y/href-no-hash has been removed/renamed a few days ago, and your rule is now raising errors

[Arcanemagus]

This should be filed on eslint-plugin-jsx-a11y, they included a breaking change meant for v6 in the v5 branch!

[ljharb]

Please do file it upstream if this is the case.

@Misiur please confirm that npm ls shows you have v5 of eslint-plugin-jsx-a11y installed.

[Arcanemagus]

@ljharb The commit they linked to is tagged under v5.1.0.

[ljharb]

@Arcanemagus thanks; would you mind filing an issue then?

[Arcanemagus]

Done.

[ljharb]

Will be resolved by https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/283.

[nathanhannig]

When I do eslint --init it installs "eslint-plugin-jsx-a11y": "^6.0.2" to my package.json. Which has this breaking change still. Any advice on how to get the old version to install?

[Arcanemagus]

@breakpoint25 You would need to file a bug with ESLint that their eslint --init script is installing a version beyond the peerDependency of this config.

To fix your existing project either remove the dependency from your package.json and run the script in the README, or manually edit the version of the existing entry to match this.

[bradennapier]

@Arcanemagus I did this and it does not work - I have default installed the versions in my package and I am still getting these errors. Seems to be no fix and this does not work for new users at this time anymore.

I simply followed the instructions given and I get every file full of the href-no-hash error now. The default instructions installed v6

[Arcanemagus]

@bradennapier That was my entire point, eslint --init is providing you a broken configuration.

Just did a quick search and either I didn't find the issue, or nobody has _filed_ one yet. You should file a new issue on ESLint telling them that eslint --init is providing a broken configuration for you.

[ljharb]

There's an existing issue; it might have been mistakenly closed.

[akshaynaik404]

You can take a look at this comment. It solves the problem for now.

[markwoon]

I'm still seeing this problem and I'm using:

+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]

This matches the what I get from npm info "eslint-config-airbnb@latest" peerDependencies.

If this is not the correct combination of packages/versions, then what is?

[ljharb]

@markwoon What's your eslint config look like?

[markwoon]

After more testing, blowing away node_modules and installing everything again seems to have resolved the issue. fingers crossed

[TrejGun]

@ljharb
I still can see this error

    "eslint": "4.3.0",
    "eslint-config-airbnb": "15.1.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-jsx-a11y": "6.0.2",
    "eslint-plugin-react": "7.1.0",

https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb/rules/react-a11y.js#L37

[ljharb]

@TrejGun that's because we aren't compatible with v6 of eslint-plugin-jsx-a11y - if you run npm ls you'll see that your dependencies are invalid, which means that you can't expect anything to work. Downgrade that plugin to v5, and everything will work (or just use the install command in the eslint-config-airbnb readme in the first place, which every single person commenting in this thread after it was closed also failed to do)

[TrejGun]

@ljharb thanks for fast response
when can I expect v6 support?

[ljharb]

There's no hurry to support it; but follow #1482 - it'll be merged when the next major release is ready.

[ljharb]

v16 is now released.

[henrycity]

I still have the same error after I run rm -rf node_modules and this command, I still have the same errors.

(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

I have the following packages installed

"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",

[ljharb]

@tvtri96 what's your .eslintrc look like?

[henrycity]

I set the configuration in package.json because I use the boilerplate from react-boilerplate. Their dependencies are outdated. I just used the above command that I mentioned to update the dependencies.

Here is what it looks like (same as in the link)

  "eslintConfig": {
    "parser": "babel-eslint",
    "extends": "airbnb",
    "env": {
      "browser": true,
      "node": true,
      "jest": true,
      "es6": true
    },
    "plugins": [
      "redux-saga",
      "react",
      "jsx-a11y"
    ],
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "rules": {
      "arrow-parens": [
        "error",
        "always"
      ],
      "arrow-body-style": [
        2,
        "as-needed"
      ],
      "class-methods-use-this": 0,
      "comma-dangle": [
        2,
        "always-multiline"
      ],
      "import/imports-first": 0,
      "import/newline-after-import": 0,
      "import/no-dynamic-require": 0,
      "import/no-extraneous-dependencies": 0,
      "import/no-named-as-default": 0,
      "import/no-unresolved": 2,
      "import/no-webpack-loader-syntax": 0,
      "import/prefer-default-export": 0,
      "indent": [
        2,
        2,
        {
          "SwitchCase": 1
        }
      ],
      "jsx-a11y/aria-props": 2,
      "jsx-a11y/heading-has-content": 0,
      "jsx-a11y/href-no-hash": 2,
      "jsx-a11y/label-has-for": 2,
      "jsx-a11y/mouse-events-have-key-events": 2,
      "jsx-a11y/role-has-required-aria-props": 2,
      "jsx-a11y/role-supports-aria-props": 2,
      "max-len": 0,
      "newline-per-chained-call": 0,
      "no-confusing-arrow": 0,
      "no-console": 1,
      "no-use-before-define": 0,
      "prefer-template": 2,
      "react/forbid-prop-types": 0,
      "react/jsx-first-prop-new-line": [
        2,
        "multiline"
      ],
      "react/jsx-filename-extension": 0,
      "react/jsx-no-target-blank": 0,
      "react/require-default-props": 0,
      "react/require-extension": 0,
      "react/self-closing-comp": 0,
      "redux-saga/no-yield-in-race": 2,
      "redux-saga/yield-effects": 2,
      "require-yield": 0
    },

[ljharb]

@tvtri96 do you see the line that says "jsx-a11y/href-no-hash": 2,?

[henrycity]

Okay, thanks. I didn't read the first post carefully. I change to "jsx-a11y/anchor-is-valid": 2 now.

[pincheira]

For those of you not yet able to make it work, I added this on my .eslintrc https://github.com/mmazzarolo/eslint-plugin-react-app/blob/master/README.md#known-issues

Cheers 🤙🏻