ESLint plugin issue when using yarn (but works w/ NPM)

[cmoesel]

Tell us about your environment

• ESLint Version: 3.19.0
• Node Version: 6.6.0
• npm Version: 3.10.3
• yarn Version: 0.23.4

What parser (default, Babel-ESLint, etc.) are you using?
default

Please show your full configuration:

The package.json has these modules (which support eslint) in devDependencies:

"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-config-react-app": "^0.6.2",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"react-scripts": "0.9.5"

My .eslintrc:

{
  "extends": [
    "react-app",
    "airbnb-base",
    "plugin:jsx-a11y/recommended"
  ],
  "rules": {
    "comma-dangle": 0,
    "no-console": 0, // allow console.log statements
    "no-underscore-dangle": ["error", { "allow": ["_id"] }], // because mongo
    "no-unused-vars": [ "error", { "args": "none" } ], // don't check function arguments
    "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }], // allow ++ in for loop expression
    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["src/helpers/*.js"]}] // don't check helpers for extraneous deps
  }
}

What did you do? Please include the actual source code causing the issue.

Ran eslint after using yarn to install my project (instead of npm): node_modules/.bin/eslint src/*

What did you expect to happen?

No linter errors.

What actually happened? Please include the actual, raw output from ESLint.

Many files (maybe all js files?) had an error like this:

/Users/cmoesel/dev/my_project/src/App.js
  2:1  error  Definition for rule 'import/no-named-default' was not found  import/no-named-default

In addition, one file had the error above plus some other errors that I thought were disabled by the config:

/Users/cmoesel/dev/my_project/src/helpers/test_helpers.js
  1:1  error  Definition for rule 'import/no-named-default' was not found                                      import/no-named-default
  2:1  error  'react-dnd-test-backend' should be listed in the project's dependencies, not devDependencies     import/no-extraneous-dependencies
  4:1  error  'enzyme' should be listed in the project's dependencies, not devDependencies                     import/no-extraneous-dependencies
  5:1  error  'react-router-test-context' should be listed in the project's dependencies, not devDependencies  import/no-extraneous-dependencies

This works if I npm install my project instead of yarn install. I'm not sure what's going on, but it's worth noting that:

• The missing rule ('import/no-named-default') was introduced in eslint-plugin-import v2.2.0
• react-scripts specifies "eslint-plugin-import" : "2.0.1" as a dependency
• eslint-config-airbnb specifies "eslint-plugin-import" : "^2.2.0" as a peerDependency
• My project specifies "eslint-plugin-import" : "^2.2.0" as a devDependency to satisfy that peerDependency.

If there's something wrong with the way we have this configured, please let me know! I've also submitted an issue to yarn in case it is a bug in yarn (yarnpkg/yarn/issues/3332).

[kaicataldo]

Not sure what's going on here, but for what it's worth, I've seen Yarn do some crazy thing while trying to resolve and dedupe a dependency tree 😬

[cmoesel]

Thanks, @kaicataldo -- and I agree, yarn can do some crazy things, but I do really like it -- and it would be a shame to have to abandon it on my project just because I get weird behavior on linting (the actual project code works great with yarn!).

I'm not familiar enough with eslint to know how to even begin debugging this. Do you have any suggestions regarding how I might debug this in order to figure out the cause?

[ilyavolodin]

I would suggest manually checking which version of eslint-plugin-import got installed with yarn. It looks like yarn installed older version then was needed. But in general, this looks like a problem with yarn itself (since NPM works fine), so I'm not sure we can help much with that.

[ghost]

I feel that #7338 might be connected.

[cmoesel]

@ilyavolodin: That was actually the first thing I checked. node_modules/eslint-plugin-import is at version 2.2.0 (the latest version). So yarn did the right thing there. node_modules/react-scripts/node_modules/eslint-plugin-import is at version 2.0.1 -- which is also right, since react-scripts asks for that version exactly. What I'm trying to figure out is why the 2.0.1 version is getting loaded when eslint is trying to enforce the no-named-defaults rule (which only exists in 2.2.0).

[mbifulco]

I'm experiencing nearly this same issue in my environment - eslint spits out
Definition for rule 'import/no-named-default' was not found import/no-named-default
on (maybe every) js file in my project when I install dependencies with yarn, but works fine if I rm -rf node_modules and run npm install before linting.

[kaicataldo]

Sounds like a mismatch between how npm and Yarn resolve the dependency tree, though @cmoesel I agree it sounds like it's doing the right thing in your case. I'll try to look into this soon and see if I can figure out what's going on!

[cmoesel]

Thanks, @kaicataldo. I'll see if I can whip up a simple project to reproduce the issue. Stand by.

[cmoesel]

@kaicataldo (and anyone else who wants to give it a try): Here's a link to a simple project that reproduces the problem:

https://github.com/cmoesel/eslint-8547

In fact, it's even worse than my real project since there are also some react rules that can't be found (but again, it all works fine if you install with npm instead of yarn).

[ljharb]

In general, "works with npm but not yarn" is a yarn bug, full stop. (to be comparable tho, you'd need an npm-shrinkwrap.json file that paralleled your yarn.lock file)

[cmoesel]

@ljharb: I don't have a strong understanding of how eslint loads plugins and extended packages -- but it seems like an incompatibility between how eslint loads these libraries and how yarn stores them. The node_modules that yarn creates actually looks ok -- the eslint-config-import v2.2.0 package (that contains the "missing" rule) is at the root of node_modules. I'm not saying that it's not a yarn bug -- but if yarn is doing something wrong, it's not yet obvious what it is.

The eslint maintainers probably know better how their module loading works, so they may be in a better position to at least identify where the incompatibility is (rather than the yarn maintainers). That said, I recognize this is an open source community and while I'll gladly accept help, I'll never expect it!

[cmoesel]

Excuse the cross-post, but wanted to let you know someone on the yarn side asked for more info, which caused me to update my example project w/ more data. Details below (in case they are helpful).

Versions

• Operating System: macOS Sierra 10.12.4
• Node: v6.6.0
• NPM: 3.10.3
• Yarn: 0.23.4

NPM

You will find the results of npm ls and the resulting node_modules here:
https://github.com/cmoesel/eslint-8547/tree/master/npm_data

In the npm ls output, the eslint-plugin-import package shows up at the root w/ v2.2.0:

├─┬ eslint-plugin-import@2.2.0
│ ├── builtin-modules@1.1.1
│ ├── contains-path@0.1.0
│ ├── doctrine@1.5.0
│ ├─┬ eslint-import-resolver-node@0.2.3
│ │ └─┬ resolve@1.3.3
│ │   └── path-parse@1.0.5
│ ├─┬ eslint-module-utils@2.0.0
│ │ ├─┬ debug@2.2.0
│ │ │ └── ms@0.7.1
│ │ └── pkg-dir@1.0.0
│ ├─┬ has@1.0.1
│ │ └── function-bind@1.1.0
│ ├── lodash.cond@4.5.2
│ ├─┬ minimatch@3.0.4
│ │ └─┬ brace-expansion@1.1.7
│ │   ├── balanced-match@0.4.2
│ │   └── concat-map@0.0.1
│ └─┬ pkg-up@1.0.0
│   └─┬ find-up@1.1.2
│     ├── path-exists@2.1.0
│     └─┬ pinkie-promise@2.0.1
│       └── pinkie@2.0.4

and under react-scripts@0.9.5 w/ v 2.0.1:

└─┬ react-scripts@0.9.5
  ├── (bunch of other packages are here...)
  ├─┬ eslint-plugin-import@2.0.1
  │ ├── doctrine@1.3.0
  │ └─┬ eslint-module-utils@1.0.0
  │   └─┬ debug@2.2.0
  │     └── ms@0.7.1

Yarn

You will find the results of yarn list and the resulting node_modules here:
https://github.com/cmoesel/eslint-8547/tree/master/yarn_data

In the yarn list output, the eslint-plugin-import package shows up at the root w/ v2.2.0:

├─ eslint-plugin-import@2.2.0
│  ├─ builtin-modules@^1.1.1
│  ├─ contains-path@^0.1.0
│  ├─ debug@^2.2.0
│  ├─ doctrine@1.5.0
│  ├─ eslint-import-resolver-node@^0.2.0
│  ├─ eslint-module-utils@^2.0.0
│  ├─ has@^1.0.1
│  ├─ lodash.cond@^4.3.0
│  ├─ minimatch@^3.0.3
│  └─ pkg-up@^1.0.0

and twice (?) under react-scripts@0.9.5 w/ v2.0.1:

├─ react-scripts@0.9.5
│  ├─ (bunch of other packages are here...)
│  ├─ eslint-plugin-import@2.0.1
│  ├─ eslint-plugin-import@2.0.1
│  │  ├─ builtin-modules@^1.1.1
│  │  ├─ contains-path@^0.1.0
│  │  ├─ debug@^2.2.0
│  │  ├─ doctrine@1.3.x
│  │  ├─ eslint-import-resolver-node@^0.2.0
│  │  ├─ eslint-module-utils@^1.0.0
│  │  ├─ has@^1.0.1
│  │  ├─ lodash.cond@^4.3.0
│  │  ├─ minimatch@^3.0.3
│  │  └─ pkg-up@^1.0.0

[THPubs]

I'm also facing the same issue. I install my packaged through yarn and when I add eslint src to package.json scripts and run it give me the following errors:

/home/pubudu/Projects/whiteberry-interiors-frontend/src/App.js
  1:1  error  Definition for rule 'import/no-named-default' was not found      import/no-named-default
  1:1  error  Definition for rule 'react/jsx-tag-spacing' was not found        react/jsx-tag-spacing
  1:1  error  Definition for rule 'react/no-array-index-key' was not found     react/no-array-index-key
  1:1  error  Definition for rule 'react/require-default-props' was not found  react/require-default-props

/home/pubudu/Projects/whiteberry-interiors-frontend/src/Components/MainNav.js
  1:1  error  Definition for rule 'import/no-named-default' was not found      import/no-named-default
  1:1  error  Definition for rule 'react/jsx-tag-spacing' was not found        react/jsx-tag-spacing
  1:1  error  Definition for rule 'react/no-array-index-key' was not found     react/no-array-index-key
  1:1  error  Definition for rule 'react/require-default-props' was not found  react/require-default-props

/home/pubudu/Projects/whiteberry-interiors-frontend/src/index.js
  1:1  error  Definition for rule 'import/no-named-default' was not found      import/no-named-default
  1:1  error  Definition for rule 'react/jsx-tag-spacing' was not found        react/jsx-tag-spacing
  1:1  error  Definition for rule 'react/no-array-index-key' was not found     react/no-array-index-key
  1:1  error  Definition for rule 'react/require-default-props' was not found  react/require-default-props

/home/pubudu/Projects/whiteberry-interiors-frontend/src/Pages/Home.js
  1:1  error  Definition for rule 'import/no-named-default' was not found      import/no-named-default
  1:1  error  Definition for rule 'react/jsx-tag-spacing' was not found        react/jsx-tag-spacing
  1:1  error  Definition for rule 'react/no-array-index-key' was not found     react/no-array-index-key
  1:1  error  Definition for rule 'react/require-default-props' was not found  react/require-default-props

✖ 16 problems (16 errors, 0 warnings)

My package.json:

{
  "name": "whiteberry-interiors-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-flexbox-grid": "^1.1.3",
    "react-router-dom": "^4.1.1",
    "styled-components": "^1.4.6"
  },
  "devDependencies": {
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^3.0.2 || ^4.0.0",
    "eslint-plugin-react": "^6.9.0",
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint src"
  }
}

The wierd thing is, I have an eslint plugin in my atom editor and it works perfectly. According to my editor, the project have no linting errors!

[ghost]

After upgrading react-scripts to latest (1.0.6) version, this annoying bug seems to be fixed. 🎉

[sk22]

Yeah, temporarily. Because react-scripts updated its dependencies, if I'm right. Once eslint-config-airbnb's dependencies are newer than react-scripts' again, the issue will reoccur. (Correct me if I'm wrong)

[ljharb]

Then react-scripts should have them as peer deps, not deps, so that this doesn't reoccur. This is a requirement of eslint (just like having react as a peer dep everywhere but the top level is a requirement of react).

[noxan]

I can confirm that using a fork of react-scripts and moving all eslint-plugin-* to the peerDependencies section makes it work.

(picter/create-react-app@aa4161c)

[ljharb]

Please link us to the react-scripts PR that fixes this, once it's filed.

[gaearon]

Replied in facebook/create-react-app#2411 (comment).

I don’t think adding any peerDependencies to react-scripts is a satisfactory solution for us because it contradicts explicit goals of the project.

[gaearon]

This is not a react-scripts issue, but seemingly a Yarn bug.
In https://github.com/cmoesel/eslint-8547, run:

readlink `which ./node_modules/.bin/eslint`

It prints:

../react-scripts/node_modules/eslint-plugin-react/node_modules/eslint/bin/eslint.js

In other words, despite there being a top-level ESLint dependency, Yarn links ./node_modules/.bin/eslint to an inner ./node_modules/react-scripts/node_modules/eslint-plugin-react/node_modules/eslint/bin/eslint.js (?!) rather than expected ./node_modules/eslint/bin/eslint.js.

If Yarn fixes the issue, the problem should go away.

[bestander]

Raised yarnpkg/yarn#3535

[bestander]

The fix is ready and will be released in Yarn 0.26 and a patch of 0.25.
This issue can be closed now

[ilyavolodin]

Thanks for following up on this! Closing, as the issue was resolved.

[cmoesel]

Yes, thank you @bestander and everyone else involved!