Create-react-app: Installing eslint in a fresh app should give an error

[xavierguarch]

Is this a bug report?

I think so, but I'm not sure.

Did you try recovering your dependencies?

Yes, I did.

$ npm --version
6.4.1

Which terms did you search for in User Guide?

eslint

Environment

Environment:
  OS:  Windows 10
  Node:  10.10.0

  Yarn:
  npm:  6.4.1
  Watchman:  Not Found
  Xcode:  N/A
  Android Studio:  Not Found

Packages: (wanted => installed)
  react: ^16.5.2 => 16.5.2
  react-dom: ^16.5.2 => 16.5.2
  react-scripts: 1.1.5 => 1.1.5

Steps to Reproduce

1. npm init react-app my-app
2. cd my-app
3. npm install eslint --save-dev

Expected Behavior

Eslint should install with the lastest version (currently 5.6.1) without problems and it should show no warnings during installation.

Actual Behavior

Several npm warnings are shown stating that an older version of eslint should be installed by me as it is a peer dependency of several packages which were automatically installed with eslint.

$ npm install eslint --save-dev
npm WARN [email protected] requires a peer of eslint@^4.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@>=1.6.0 <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 4.x but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@^2.10.2 || ^3 || ^4 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 30 packages from 33 contributors, updated 6 packages, moved 1 package and audited 14759 packages in 10.093s
found 0 vulnerabilities

Reproducible Demo

Not available.

[gaearon]

It's not supported to install ESLint inside a CRA project. You already have ESLint there.

What are you trying to do?

[xavierguarch]

Thanks for your fast answer, @gaearon!

The reason I was trying to install it by myself was in order to downgrade it to an older version of eslint because I wanted to use the following _Shareable ESLint Config_ in my project: eslint-config-techchange.

And that package has currently these peerDependencies:

    "eslint": "^3.19.0",
    "eslint-plugin-react": "~7.0.1"

How should I proceed in this situation?

[xavierguarch]

Ups! I closed the issue without noticing. Reopening again...

[bugzpodder]

I would ask you to file an issue with https://github.com/TechChange/eslint-config and ask them to support the newer eslint.
That being said, most of my plugins worked smoothly with the newer eslint version, it is very possible that the plugin you mentioned would be technically unaffected.

[xavierguarch]

@gaearon: As a side note, unfortunately your statement is not evident from reading the documentation of the project. It is not self-evident for a newbie like me what packages "_are already there_", as you say. Is there a reason why they are not listed in the README?

Nor it is clear either that I cannot install them by my own when they are "already there"... Is it explained anywhere?

[gaearon]

@xavierguarch

Sorry, I agree it isn't super clear and we should document this better. AFAIK in 2.x (to be released today) we actually warn if you attempt to do it so you'd know about the issue sooner.

We "hide" dependencies like Babel, ESLint, webpack, etc, so that we can make sure they work together well, and manage their versions. If you install a different version on top you're risking breaking our setup.

ESLint will probably work (although not always). If you attempt to do something similar with Babel or webpack it will definitely break.

[xavierguarch]

@bugzpodder Thanks Jack, i'll follow your advice and give it a try!

[gaearon]

I'd also add we don't really have a supported way to add linter plugins right now.

[xavierguarch]

@gaearon When you say:

ESLint will probably work (although not always).

Are you saying that installing ESLint by my own as I did will probably work (despite the npm warnings, which I should ignore)? Is that what you mean?

[gaearon]

I'm saying that I'm not sure if it'll create problems or not (especially if you install a different version than we use internally). But if npm start still works, should be okay.

[xavierguarch]

I'd also add we don't really have a supported way to add linter plugins right now.

Well, supposing that I managed to have the ESLint plugin [^1] to work with the last version of ESLint, I understand that these two steps would suffice:

1. npm install eslint-config-techchange --save-dev
2. Add the following to my .eslintrc:

{
  "extends": ["techchange/react"]
}

I'll try it and I'll let you know.

[xavierguarch]

FYI, npm start works without problems after installing an older version of ESLint by my own and using the snippet above in my .eslintrc.

Anyway, I understand from your comments @gaearon and @bugzpodder that the preferred route in my case would be to keep using the ESLint version that comes with create-react-app (now that I know that!) and have the plugin simply be upgraded to support it.

Thanks for your comments.

The only real issue here would be then a documentation one to make more clear:

1. Which packages are already managed by create-react-app
2. That you cannot install those packages by your own without going into problems...

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[xavierguarch]

I have updated the title to better reflect the desired behaviour.

[xavierguarch]

For the record, the current version of CRA ([email protected]) still allows me to install eslint by my own without giving any error nor warning:

C:\temp\my-app>npm install eslint --save-dev
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 7 packages from 7 contributors, updated 3 packages and audited 35826 packages in 15.614s
found 0 vulnerabilities

But it will in fact create a little mess which is worst when you try to uninstall it:

C:\temp\my-app>npm uninstall eslint
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@>=1.6.0 <6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@>=2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 5.x but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@^3 || ^4 || ^5 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

removed 7 packages and audited 35639 packages in 10.535s
found 0 vulnerabilities

😰

[xavierguarch]

@gaearon: I comment this just to let you know that your statement above seems to be untrue:

AFAIK in 2.x (to be released today) we actually warn if you attempt to do it so you'd know about the issue sooner.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.