33

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:

"babel-eslint": "9.0.0"

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

  • Hi, have you tried the steps suggested in the error message? – krisaoe Jan 02 '19 at 07:08
  • yeah but i get the same shit error –  Jan 02 '19 at 07:48
  • 1
    Same here, problems with `webpack` and `babel-eslint`, trying downgrading `react-scripts` from 2.1.2 to 2.1.1 didn't work, there is a issue open on GitHub here: https://github.com/facebook/react/issues/14518 – Urko Pineda Jan 02 '19 at 11:21
  • Hey @Chawki_726 , try using `npm ls babel-eslint`and check what package is downgrading or upgrading `bable-eslint`. I have the same issue but with `webpack` and `react-recaptcha-v3` package has introduced the issue for me. – Urko Pineda Jan 02 '19 at 11:27
  • i solve the issue by deleting the global babel-eslint –  Jan 03 '19 at 15:22
  • Does this answer your question? [NPM start returns error, "There might be a problem with the project dependency tree"](https://stackoverflow.com/questions/56528222/npm-start-returns-error-there-might-be-a-problem-with-the-project-dependency-t) – Henke Mar 18 '22 at 14:16

11 Answers11

38

create .env file in your project file and add the following statement

SKIP_PREFLIGHT_CHECK=true

Save the file

Remove node_modules, yarn.lock, package.lock

Then reinstall node_modules with 

npm install

This should work

Hussam Kurd
  • 8,066
  • 2
  • 43
  • 38
  • 2
    may I know the behind the scenes – Selva Ganapathi Jul 27 '19 at 09:01
  • 15
    While this does work, it is not necessarily the right solution, it only ignores the issue causing the warning. It clearly states, "That will permanently disable this message but you might encounter other issues." This can happen due to a number of reasons, multiple CRA's with different versions within a monorepo are trying to be installed at the root level, or a conflict with globally installed node_modules if installed in an unintended directory. – zilj Oct 22 '19 at 10:45
  • 1
    @zilj do you have a better solution? This problem stems directly from an incompatibility of the eslint used by create-react-app and the newer versions of eslint. Unless facebook addresses the problem and solves it the right way, I think this solution is the best we have. – Manny Alvarado Jun 28 '20 at 18:35
19

I had the same problem and do all the suggested steps but the problem still, so, my error is that i have a reactApp inside other Javascript App i had this structure.

--MyProjects
----NodeJsApp
----node_modules of NodeJsApp
----package.json of NodeJsApp
----ReactApp
------node_modules of ReactApp
------package.json of ReactApp

The problem solved to me deleting my ReactApp node_modules directory, then i do a reestructure of my directories because i have a disaster.

--MyProjects
----NewDirectory (inside all about NodeJsApp)
------node_modules of NodeJsApp
------package.json of NodeJsApp
----ReactApp
------package.json of ReactApp

After that i do :

npm install

and then npm start and my problem has fixed, i think that the problem is that the parent directory cant have a javascript /nodeJs/ project or something that have node_modules .

Leonardo Bouchan
  • 356
  • 3
  • 5
  • 2
    This is the real answer to this issue. I was having a node_modules folder otside my reactApp directory also which was creating the issue. Thanks man – Adesh Kumar May 29 '19 at 05:00
  • 5
    But why npm takes deps from parents node_modules, if it firstly must takes local node_modules in current directory? – DTupalov Jul 04 '19 at 14:51
  • Thank you for being you:) I too had node_modules, as well as package-lock.json and yarn.lock in my parent projects directory. I deleted them, as well as the ones in my local project folder, then reinstalled in the project. Fixed! That had been an issue for a long time. Thank you. – EvanPoe Aug 25 '21 at 03:38
9

Part of the output you provided says:

Check if C:\Users\chawki\node_modules\babel-eslint is outside your project directory. For example, you might have accidentally installed something in your home folder.

Browse to C:\Users\chawki\node_modules\ and delete the babel-eslint folder, or simply delete C:\Users\chawki\node_modules.

Marco Scabbiolo
  • 7,203
  • 3
  • 38
  • 46
  • This solved my problem because I accidentally yarn install on the parent folders. This would be a noob mistake. The entire `node_modules` folder is essentially a mistake. – BoBoDev Sep 02 '20 at 04:14
5

Here What i did...

  1. C:\user\[yourUserName]\node_modules\babel-eslint and delete the file
  2. C:\user\[yourUserName]\node_modules\eslint and delete the file
5

I just deleted the node_modules folder (for me it was C:\user\[yourUserName]\node_modules\) and re-installed it.

m02ph3u5
  • 3,022
  • 7
  • 38
  • 51
obini
  • 53
  • 1
  • 3
3

If you dont want to create .env file there is another alternative you can pass the SKIP_PREFLIGHT_CHECK=true directly in the script. For Example

   "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
Bilal Hussain
  • 572
  • 6
  • 14
2

Delete your eslint and babel-eslint file from your node modules on your computer e.g. -C:\Users\vishnu\node_modules -delete eslint and babel-eslint file.

In your project:

yarn remove eslint
yarn add --dev eslint@6.1.0

yarn remove babel-eslint
yarn add --dev babel-eslint@10.0.3
Dale K
  • 25,246
  • 15
  • 42
  • 71
Vishnu Verma
  • 21
  • 1
0

in package.json

resolutions:{
    "babel-eslint": "9.0.0"
}

if you reinstall your all dependencies, you will be forcing "babel-eslint" to be version "9.0.0". if you start your app, you will have no issue.

Yilmaz
  • 35,338
  • 10
  • 157
  • 202
  • Well that didn't work at all `if you reinstall your all dependencies, you will be forcing "babel-eslint" to be version "9.0.0". if you start your app, you will have no issue.` this didn't happen. – Steve Moretz Feb 15 '22 at 07:38
0

My problem was I installed webpack as a global package... after i deleted webpact and run npm install, the problem was gone

Igbalajobi Zhikrullah
  • 1
  • 1
0

Make sure you don't have a global webpack package or somewhere higher up the directory structure. In my case, I had it globally installed. Deleting and then running npm install and then npm start worked perfectly.

Rituraj Singh
  • 9
  • 4
0

Run npm ls babel-eslint and see which dependencies are using it or installing another version. Try updating those libraries.

It worked for me.

Felipe Lobo
  • 11
  • 4