Create-react-app: 'jsx-a11y/href-no-hash' was not found jsx-a11y/href-no-hash

Created on 6 Nov 2017 · 15Comments · Source: facebook/create-react-app

Is this a bug report?

yes

Can you also reproduce the problem with npm 4.x?

yes

Environment

node -v: 8.9.0
npm -v: 5.5.1
yarn --version (if you use Yarn): 1.3.2
npm ls react-scripts (if you haven’t ejected): [email protected]

Then, specify:

Operating system: mac os 10.13.1
Browser and version (if relevant):

Steps to Reproduce

(Write your steps here:)

after update
yarn start

Expected Behavior

No warnings!

Actual Behavior

after update to 1.0.17 warning in all file in project

@#

Reproducible Demo

Source

alexeikaratai

Most helpful comment

Of course if you eject you can customize anything you want.

But you can't expect that you can take two arbitrary ESLint presets and use them together. If they rely on different versions of plugins, you need to either pick just one of them, or wait for them both to "line up".

We try to keep up with the updates, but we don't always match what Airbnb preset uses. If you ejected and prefer Airbnb's preset, just remove ours.

gaearon on 3 Feb 2018

👍3

All 15 comments

AFAIK this can only happen if you manually added eslint to your dependencies (and its version is incompatible). Doing so has never been supported.

gaearon on 6 Nov 2017

@gaearon in 1.0.14 work all fine! =) and i use 4.10 and all works fine!

alexeikaratai on 6 Nov 2017

Please provide your full package.json.

gaearon on 6 Nov 2017

@gaearon
"dependencies": {
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"eslint": "^4.10.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.7.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-prettier": "^2.2.0",
"eslint-plugin-react": "^7.4.0",
"prettier": "^1.7.4"
},

alexeikaratai on 6 Nov 2017

That's the problem:

"eslint": "^4.10.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.7.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-prettier": "^2.2.0",
"eslint-plugin-react": "^7.4.0",

Using custom ESLint configs with CRA projects is not supported and is subject to issues like this. In particular, the difference in eslint-plugin-jsx-a11y versions is causing the trouble.

gaearon on 6 Nov 2017

😕6 👍1

I'm confused, does this mean I can't use eslint with CRA even if I execute it separately with a different config? I need eslint in all my projects for CI purposes and I would prefer not to be able to run a different version of it or at least have a different config using the same version of eslint. In my opinion, a boilerplate should not limit my ability to use a popular tool, and if there's anything I can do to help I'd be happy to contribute.

nickmccurdy on 2 Dec 2017

👍1

This is sort of a bizarre response and reads like "ejecting from CRA is not supported by CRA".

That said, this is probably an ESLint problem more than a CRA one. Really really hard to track down, though.

jasonrhodes on 3 Feb 2018

There's some misunderstanding in this issue.

If you look at the original post, OP claims the project wasn't ejected:

npm ls react-scripts (if you haven’t ejected): [email protected]

Then their package.json looks like it has no relation to CRA at all:

"devDependencies": {
"babel-cli": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"eslint": "^4.10.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.7.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-prettier": "^2.2.0",
"eslint-plugin-react": "^7.4.0",
"prettier": "^1.7.4"
},

(We don't add babel-cli or babel-polyfill automatically even after ejecting, but we do add many other deps. It's also missing react-scripts which a non-ejected project would have.)

So I got confused by this report.

gaearon on 3 Feb 2018

Of course if you eject you can customize anything you want.

We try to keep up with the updates, but we don't always match what Airbnb preset uses. If you ejected and prefer Airbnb's preset, just remove ours.

gaearon on 3 Feb 2018

👍3

@gaearon that makes perfect sense, it wasn't clear from your comment that what you were referencing was the addition of the airbnb config.

The thing is, this same problem happens without the airbnb config. eslint-config-react-app hasn't released a new version that removes the recently-removed jsx-a11y/href-no-hash rule in the eslint-plugin-jsx-a11y package's 6.x release, so when greenkeeper tells folks to update that package, everything breaks.

I really wish eslint-plugin-jsx-a11y could be a regular dependency of eslint-config-react-app since it actually depends on those rules -- that way I wouldn't have the jsx plugin in my package.json at all and wouldn't be prompted to update it when it has new versions.

Not sure there's a good fix for this with how peer deps work, but for now we just have to make some kind of note about it and ignore that package when greenkeeper asks us to upgrade, until this config plugin pushes a release that doesn't reference the removed rule.

jasonrhodes on 3 Feb 2018

when greenkeeper tells folks to update that package, everything breaks.

This sounds like an issue with greenkeeper to me. Out ESLint preset specifies a peer dependency on 5.x of the plugin. The update to 6.x is by definition unsafe if it breaks a peer dependency of a dependency.

eslint-config-react-app hasn't released a new version

We actually did release it as part of the 2.x alpha. You can search issues for “2.x roadmap” and see the installation instructions there. The preset package has been published, it’s just not tagged as stable.

I really wish eslint-plugin-jsx-a11y could be a regular dependency of eslint-config-react-app

This doesn’t work in ESLint.

gaearon on 3 Feb 2018

👍1

This sounds like an issue with greenkeeper to me.

I think it's just a problem with peer deps being "suggestions" ... but yeah maybe GK could read every package's peer dep requirements in and determine if it's ok to upgrade.

Everything else you say here is 100% correct and we're all settled now, just hoping to leave some breadcrumbs as anyone who currently uses eslint-config-react-app + greenkeeper is likely to hit this issue until that change is in a regular release. Thanks!

jasonrhodes on 3 Feb 2018

While peer deps are “suggestions”, IMO the only way they can be useful is to specify compatibility ranges. So it would make sense to me if GK respected that.

gaearon on 3 Feb 2018

They’re not suggestions, they’re requirements; indeed greenkeeper lacks proper peer dep support.

Adding npm ls to your tests will prevent greenkeeper from thinking invalid deps are passing.