Create-react-app: warning Definition for rule 'jsx-a11y/href-no-hash' was not found jsx-a11y/href-no-hash

[mahnunchik]

Can you reproduce the problem with npm 4.x?

Yes.

Have you read the Troubleshooting section and searched the User Guide?

Yes.

Environment

$ node -v
v8.1.2
$ npm -v
5.0.3

Then, specify:

1. Operating system: Ubuntu 16.04

Steps to Reproduce

1. Install eslint-config-react-app
2. Console shows warning

Expected Behavior

No warnings.

Actual Behavior

2:1  warning  Definition for rule 'jsx-a11y/href-no-hash' was not found  jsx-a11y/href-no-hash

[gaearon]

The steps to reproduce are incomplete. What dependencies does your project have? How do you run the lint? What console? Is this a project made with Create React App or did you try to use the config outside of it?

[mahnunchik]

What dependencies does your project have?

package.json

  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.1.0",
    "babel-preset-env": "^1.5.2",
    "babel-preset-react-app": "^3.0.0",
    "css-loader": "^0.28.4",
    "eslint": "^4.1.1",
    "eslint-config-react-app": "^1.0.4",
    "eslint-loader": "^1.8.0",
    "eslint-plugin-flowtype": "^2.34.0",
    "eslint-plugin-import": "^2.6.0",
    "eslint-plugin-jsx-a11y": "^6.0.0",
    "eslint-plugin-react": "^7.1.0",
    "file-loader": "^0.11.2",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.29.0",
    "postcss-js": "^1.0.0",
    "postcss-loader": "^2.0.6",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0",
    "webpack-manifest-plugin": "^1.1.0"
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  }

How do you run the lint?

webpack.config.js

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        enforce: 'pre',
        use:{
          loader: 'eslint-loader',
        },
      },

Is this a project made with Create React App or did you try to use the config outside of it?

I've tried to use config outside of Create React App.

[gaearon]

eslint-config-react-app specifies eslint@^3.19.0 as a peer dependency. You are using [email protected] which is a different major version. They are not compatible at the moment.

[mahnunchik]

@gaearon It works without any problems. It shows only one warning.

[gaearon]

Oops, I looked at wrong package. In your case, it's eslint-plugin-jsx-a11y@6 causing the issue. Again, the peer dependency of our package is different: it asks for 5.x of this plugin.

By "not compatible" I mean that we never tested them together. They might happen to work in some cases, and break in others. It's the only warning you see, but it's caused by underlying breaking changes (not sure where exactly). You will find more issues if you try to run unsupported versions together.

[sirgallifrey]

As a workaround I added this to my .eslintrc

    "jsx-a11y/href-no-hash": "off",
    "jsx-a11y/anchor-is-valid": ["warn", { "aspects": ["invalidHref"] }]

reference https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/CHANGELOG.md#600--2017-06-05

[gaearon]

@sirgallifrey

Note though that this is not the right fix, and you’ll get more problems with time. The root of the problem is that you installed an incompatible version of one of the packages. I can’t say more without seeing an example project.

[gking2224]

I found this issue even after noting the comments about compatible versions above. Finally got something to work with this combination of dev dependencies:

    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.0.1",
    "eslint-loader": "^1.8.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.0.1",
    "eslint-plugin-react": "^7.1.0",

Hope this helps.

[aislanmaia]

I've the same problem.
Here is my eslint dev dependencies:

 "eslint": "3.19.0",
 "eslint-config-react-app": "^1.0.5",
 "eslint-loader": "1.8.0",
 "eslint-plugin-flowtype": "2.34.0",
 "eslint-plugin-import": "2.2.0",
 "eslint-plugin-jsx-a11y": "5.0.3",
 "eslint-plugin-react": "7.1.0",

[derwaldgeist]

Got the same problem. Using @gking2224's configuration didn't help.

[gaearon]

Delete node_modules and package-lock.json.

If you use npm 5, roll back to npm 4. npm 5 is known to be buggy. Ensure npm -v output gives you something starting with 4.

Open package.json. Ensure you don't have any dependencies there that starts with eslint.

Now run npm install. This should fix the issue.

[gaearon]

I am locking this because "me too" responses are not helpful to anyone.

If you experience this, it's likely because you used a broken version of npm. In the comment above I posted how to work around it. Of course, there instructions are only for non-ejected Create React App users. If you ejected (or didn't use CRA) it is up to you to manage your dependencies and figure out compatible versions.

If you still experience this without ejecting on CRA after following my instructions please file a new issue. And follow the issue template that asks you to publish a reproducing project. Otherwise there's no way we can help you.