Create-react-app: Allow patch level differences in preflight check

[togakangaroo]

Is this a bug report?

Yes, I am getting an eslint preflight check error hen I don't think I should be.

Did you try recovering your dependencies?

Yes, I've tried deleting the package-lock and rebuilt some stuff, but this issue seems pretty clearcut

Which terms did you search for in User Guide?

I searched for eslint there and in the issues but this is for the new release and I dont' think thats updated yet

Environment

(paste the output of the command here)

Steps to Reproduce

To reproduce

create-react-app craeslint
cd craeslint
npm install [email protected]

I get the following. I don't think this is correct - a difference in patch version shouldn't cause the preflight check to fail, should it? (Also react-scripts should probably update their eslint version)

> [email protected] test /Users/gmauer/code/craeslint
> react-scripts test


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "5.6.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

  /Users/gmauer/code/craeslint/node_modules/eslint (version: 5.6.1) 

Expected Behavior

tests run fine - there is only a difference in patch level of eslint

Actual Behavior

I get the following

> [email protected] test /Users/gmauer/code/craeslint
> react-scripts test


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "5.6.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

  /Users/gmauer/code/craeslint/node_modules/eslint (version: 5.6.1) 

[Timer]

Right now, this is intentional. We want to find an exact version match. We've actually never supported installing ESLint alongside Create React App, so this warning is fine IMO.

For now, please match the version or disable the check with the suggested environment variable.

[gaearon]

@togakangaroo Could you clarify why you're installing ESLint inside your project? Is it for editor integrations or something else?

[schematis]

I'm running into this as well.

The reason I'm installing it is because Yarn doesn't recognize it as being installed in order to satisfy peer dependencies of other packages (ie. eslint-config-airbnb).

[silverwind]

Could you clarify why you're installing ESLint inside your project

In my case, I have it to lint files outside of src. I'd say this check should at least respect semver.

[goncy]

My case is that i use a yeoman generator for copying my usual react lint rules, i can also use this with non-cra projects

[gaearon]

Would allowing patch-level differences for ESLint specifically satisfy most people in this thread?

[gaearon]

Note you can ignore the check (just as it says) by putting

SKIP_PREFLIGHT_CHECK=true

to a file called .env in your project root.

[goncy]

Note you can ignore the check (just as it says) by putting

SKIP_PREFLIGHT_CHECK=true

to a file called .env in your project root.

Yes, my actual solution was adding an .env file with that flag to the generator.

The problem with this is that i think the version mismatch between eslint versions is not that important (maybe i'm wrong), but to solve this problem i add the flag to my .env, maybe doing that i supress another really important warnings. Except for jest, is really important to do this preflight checks for dev dependencies?

[gaearon]

People have definitely complained about broken ESLint before after installing different versions. But yeah patch shouldn’t make a big difference. Although the fact that it even exists up the tree can cause issues by itself.

[togakangaroo]

So to fill in the picture, my own use case is that I have emacs checking my code with eslint. To do this correctly I want it to use the actual version from in my project so I want it to use npx eslint. This means that I have to have it in my project dependencies directly.

I would imagine anyone else who wants to use it in their Dev workflow would have the same. What are the issues that mismatched versions might cause? Is there no way around those?

[Apollo725]

Is there any other way without creating new .env file including 'SKIP_PREFLIGHT_CHECK=true' ?
Error says 'That will permanently disable this message but you might encounter other issues.' so I don't want to face on other issues

[silverwind]

Would allowing patch-level differences for ESLint specifically satisfy most people in this thread?

eslint is a project that follows semver, so minor version differences are compatible too. Suggesting you bark only on major version differences, like for example:

semver.diff(yourVersion, userVersion) === 'major'

[ywwhack]

I have a project which includes both server/client codes.

Project structure like below:

├── README.md
├── config
├── client
├── logs
├── nodemon.json
├── package-lock.json
├── package.json
└── src

Asume server code root path is ProjectRootPath, client code root path is ProjectRootPath/client

When i run npm run build in the client folder, it tell me babel-eslint version conflict with ProjectRootPath/node_modules/babel-eslint, it conflict with my server code root path(not client code root path), is it a bug?

[niccololampa]

I am encountering this error too. I am using eslint and prettier for my vscode, so it will auto format my code when saved in VScode.

These are the steps that I have implemented that led to the error in code.

https://medium.com/quick-code/how-to-integrate-eslint-prettier-in-react-6efbd206d5c4

Thanks.

[mptorz]

I have exactly the same issue as @niccololampa

I applied the fix with editing a .env file in my root, but that kinda feels like a temporary solution and I wouldn't want that to lead to further errors.

[bugzpodder]

So eslint is already part of react-scripts, so there should be available as part of npm scripts. I would just not install a different copy in your project. Goto your package.json and remove eslint entry from dependencies or devDependencies.

This works fine for me using vscode + eslint plugin.

[niccololampa]

Discovered the solution for my case. For those like me trying to install the Airbnb eslint styling. Follow these steps.

The eslint-config airbnb requires the following eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y all of which are already installed in the create-react-app. The problem arises from duplicate installation resulting from the command : npx install-peerdeps --dev eslint-config-airbnb

So the solution is just call the following command:

npm install --save-dev eslint-config-airbnb 

This will just install the airbnb configuration and would not duplicate any packages installed already in create-react-app. Next is to create a .eslintrc file in your root file and insert the following code:

{
  "extends": ["react-app", "airbnb", "plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"]
}

@mptorz

[silverwind]

These kind of solutions will not work correctly for the linting done in dev mode, because those use the eslint config from webpack only which is set up to ignore eslint's config files. So your CLI and editor-based linting will use different rules from the linting done in dev mode.

[joserocha3]

I forked this repo and (mostly) removed eslint from the react-scripts package. You can install eslint as you see fit in your project without any errors or .env variables.

You should still make sure you are linting for the react recommended issues.

https://github.com/joserocha3/create-react-app-eslintless

[rafsawicki]

I'm having the same problem with the similar setup as @ywwhack . Is there any reason to check a parent node_modules directory for an eslint version? I thought that node won't look into parent if it finds a eslint package in a project node_modules folder.

[AdamLantz]

Also encountering this issue. It seems that this was historically not regarded as an issue though.

https://github.com/facebook/create-react-app/issues/1355#issuecomment-270907176

[Shelagh-Lewins]

I used @niccololampa's suggestion and put the eslint config in package.json, replacing what create-react-app had put in. Seems to work well.

[AdamLantz]

I wonder if adding some specificity to the skip variable could solve the issue (e.g. SKIP_PREFLIGHT_CHECK=eslint).

Rather than saying you're knowingly skipping all the preflight checks, you could specify which preflight checks to skip.

[lededje]

I've experienced this issue when using a mono repo that contains a root, base, eslint config with variations for front end and node apps further down. A way of disabling only eslint would be most welcome. I had a quick Google for the other things prelight manages, does anyone have any details?

[Malik992]

on windows i've the same problem but i've done yarn add cross-env -D in the terminal and i've modified this line in the file name's package.json.
"scripts": { "start": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts start", }, . And after i've done yarn start now it's working.

[alistair-hmh]

I'm also running into this issue when using Yarn Workspaces. Even using "nohoist": ['**/eslint'], with head node_modules/eslint/package.json revealing "version": "5.6.0", CRA still tries to pick [email protected] from <workspace-root>/node_modules/eslint.

When examining the directory structure the packages look like they get hoisted just fine, but perhaps CRA does not obey Yarn Workspaces nohoist options?

[johnbowdenatfacet]

Also having issues with react-scripts wanting v5.6.0 but 5.12.1 being installed somehow, even though I have eslint in my package.json as 5.6.0 and in resolutions as 5.6.0, and also with eslint removed.

[HarshavardhananHokage]

I am maintaining the same directory structure as @ywwhack.
My question is, if I install eslint 5.6.0 in client directory and 5.13.0 in the root directory, shouldn't react stop looking for eslint as soon as it finds 5.6.0 inside the client directory's node_modules? Why does it have to check for versions higher up the tree? Or is this how npm works in general?

[ccjx]

Is there an issue number with a writeup of what the issues are with a different version of eslint so that someone else can potentially patch the defect?

[piotr-cz]

My use case is that I have installed other package which depends on _eslint_.
I think good practice would be showing a warning that the SKIP_PREFLIGHT_CHECK=true is enabled after starting development server

[piotr-cz]

Like moving flag check to verifyPackageTree.js and adding following lines: adding following lines:

if (process.env.SKIP_PREFLIGHT_CHECK === 'true') {
  console.log(`Warning: ${chalk.bold('SKIP_PREFLIGHT_CHECK')} is set to true`);
  console.log(`Having wrong version of following packages may break your setup: ${depsToCheck.join(', ')}.\n`)
  return
}

[jgdodson]

I have a project which includes both server/client codes.

Project structure like below:

├── README.md
├── config
├── client
├── logs
├── nodemon.json
├── package-lock.json
├── package.json
└── src

Asume server code root path is ProjectRootPath, client code root path is ProjectRootPath/client

When i run npm run build in the client folder, it tell me babel-eslint version conflict with ProjectRootPath/node_modules/babel-eslint, it conflict with my server code root path(not client code root path), is it a bug?

@ywwhack I think you need to put root: true in your client/.eslintrc to indicate that ESlint shouldn't look in parent directories for a config file.

[latipun7]

I think you need to put root: true in your client/.eslintrc to indicate that ESlint shouldn't look in parent directories for a config file.

@jgdodson imo it won't work. It only skip the eslint configuration, not eslint package. For example he have eslint v5.13.0 in his root folder, but in client (create-react-app) installed eslint v5.12.0. When run or build, the preflight-check found it conflict.

I'm sorry if I wrong here. I'm still newbie, and don't know to resolve if that above is the case. Thanks.

[latipun7]

@ywwhack :

I have a project which includes both server/client codes.

Project structure like below:

├── README.md
├── config
├── client
├── logs
├── nodemon.json
├── package-lock.json
├── package.json
└── src

Asume server code root path is ProjectRootPath, client code root path is ProjectRootPath/client

When i run npm run build in the client folder, it tell me babel-eslint version conflict with ProjectRootPath/node_modules/babel-eslint, it conflict with my server code root path(not client code root path), is it a bug?

@rafsawicki :

I'm having the same problem with the similar setup as @ywwhack . Is there any reason to check a parent node_modules directory for an eslint version? I thought that node won't look into parent if it finds a eslint package in a project node_modules folder.

My solution:
I solved this but really I don't know the real cause. I just switch out the server-client folder structure so it's look like this:

├── node_modules
├── public
├── server
    ├── node_modules
    ├── .eslintrc.yaml
    ├── index.js
    ├── package.json
    └── yarn.lock
├── src
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

I don't know is it because I switch out the structure or is it because I use yarn. I'm sorry, I'm just noob newbie m(_ _)m

[kamlekar]

I manually uninstalled and installed the actual version. Hope that doesn't bring any issues later.

[privateOmega]

@ywwhack Did you ever find a solution to this? I am also using the same folder structure and is stuck at this point.
@gaearon @Timer May I suggest a solution, to have an additional option in newer CRA versions eg. --skip-linting, so that eslint and its dependencies won't be installed and then users who require linting can install whatever linting tools they prefer, that could solve problems like mine so I could install whatever plugins I want and will be compatible with eslint version in the project root.

[StephenHaney]

This isn't strictly related to ignoring patch level changes, but may contribute to the bigger convo. If not, I can remove it:

In a yarn workspaces monorepo setup (with nohoist on for everything):
CRA directory's node_modules correctly has eslint 5.16.0, but further up the parent's package.json has eslint as well (used for linting all the other packages in the repo).

If I peg the parent's ESLint to 5.16.0, CRA doesn't complain... but then I have to use that for all my packages. Besides missing the improvements made to ESlint since, if one of the other packages had a similar requirement for a different version I'd just be stuck.

Pinning my parent to 5.16.0 for now, but I agree a --skip-linting type flag could be useful for folks that want to use CRA in a multi-package repo that already has global linting.

[timini]

this worked for me

"nohoist": [
      "**/webpack"
    ]

[msalsbery]

I hope this issue is still being looked into!

With eslint replacing the deprecated tslint this year, it would be nice to not have to use the SKIP_PREFLIGHT_CHECK environment variable or worse, be stuck with an old eslint up the project tree from a CRA app!

I’d be happy with something like SKIP_PREFLIGHT_CHECK=eslint ... seems like that would be a relatively simple compromise

[nalendro16]

I had this issue after changin some file names, recently i delete node_modules on my project directory then npm start didnt, work.

then try this:

1. So i re install npm in my project directory with npm install
2. Delete node_modules/eslint from project directory manualy
3. make .env on project root directory
4. then type SKIP_PREFLIGHT_CHECK=eslint
5. and npm start

hope can help

[spgandhi]

SKIP_PREFLIGHT_CHECK=eslint does not work. SKIP_PREFLIGHT_CHECK=true works instead.