'npm start' returns error: "There might be a problem with the project dependency tree"

I'm new to coding and having issues with why I can no longer get React set up correctly. I struggled with this last week and then finally managed it. But now I have had the same issue again and nothing is working.

I have a project which I started with `npx create-react-app` and then when I `cd` into the project I get this issue:

> 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:
>
> "webpack": "4.29.6"
>
> Don't try to install it manually: your package manager does it
> automatically. However, a different version of webpack was detected
> higher up in the tree:
>
> /Users/aliceparker/node_modules/webpack (version: 4.33.0)
>
> Manually installing incompatible versions is known to cause
> hard-to-debug issues.
>
> If you would prefer to ignore this check, add
> SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That will
> permanently disable this message but you might encounter other issues.
>
> To fix the dependency tree, try following the steps below in the exact
> order:
>
> 1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
> 2. Delete node_modules in your project folder.
> 3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
> 4. Run npm install or yarn, depending on the package manager you use.
>
> In most cases, this should be enough to fix the problem. If this has
> not helped, there are a few other things you can try:
>
> 5. If you used npm, install yarn (

[To see links please register here]

) and repeat the above steps with it instead.
> This may help because npm has known issues with package hoisting which may get resolved in future versions.
>
> 6. Check if /Users/aliceparker/node_modules/webpack is outside your project directory.
> For example, you might have accidentally installed something in your home folder.
>
> 7. Try running npm ls webpack in your project folder.
> This will tell you which other package (apart from the expected react-scripts) installed webpack.
>
> If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file
> in your project. That would permanently disable this preflight check
> in case you want to proceed anyway.
>
> P.S. We know this message is long but please read the steps above :-)
> We hope you find them helpful!

I've followed the steps above. Still get the issue.
I've also uninstalled webpack globally and re-installed it.

Here is what my package.json file looks like:

`{
"name": "ravenous-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}`

Can anyone kindly guide me through ways to solve this?
(PS. I tried just creating a new project, but get the same issue...)

The issue is the webpack installed in your user directory.
Remove it with npm or by hand and all should run fine:
ref:

[To see links please register here]

In the terminal, run:

`cd ~`

Then:

`ls`

You should see a list of files. If `node_modules` is included in that list (as it appears it should be), you want to delete that folder. You can do so in the terminal like so:

`rm -rf node_modules`

But keep in mind: this will not send the folder to the trash. It will irrevocably delete it. `rm -rf` is a powerful command. If that makes you nervous, type `open .` instead. That will open your "home" (`~`) directory in Finder, and you can delete `node_modules` in the familiar, right-click, send-to-trash way there.

Hope that helps!

The problem is with your tree folder on your computer when you make all projects,try the app in folder not on exist one and i hope it will work

Delete `package-lock.json` (not `package.json`!) and/or `yarn.lock` in your project folder.

Delete `node_modules` in your project folder.

Remove `webpack` from dependencies and/or devDependencies in the `package.json` file in your project folder.

Run `npm install` or `yarn`, depending on the package manager you use.

I tried all of the above and it was not working but once i added a .env file to my project structure and added `SKIP_PREFLIGHT_CHECK=true` into the file. i could bypass the problem:

[![problem solved][1]][1]

This what you put inside the `.env` file:

[![This what you put inside the .env file][2]][2]


[1]:

[2]:

The solution that worked for me

Add `SKIP_PREFLIGHT_CHECK=true` to a .env file in your project. I don't know if this may result in errors in the future.

Do as it's saying on the error to make it work.
Create a `.env` file in your project directory and add `SKIP_PREFLIGHT_CHECK=true`, it will work.

I have faced the same problem before and I solved it.
The `create-react-app` already provided `webpack(v4.29.6)`, which conflicts with `webpack(v4.33.0)` in `/Users/aliceparker/node_modules`.

So if you remove the second `webpack(v4.33.0)`, it would run.

I created project using npx and I was getting same error with babel-eslint initially. I followed @davidflyod91 approach, it worked for me. Im not happy with deleting the whole node_module folder from ~ directory (in my MAC)(i mean to say the place where -g modules are installed). So, I put back the node_modules and deleted folders associate with below ones from node_modules in ~/node_modules directory and tried running the application (npm run start).

- Webpack
- babel
- eslint
- create-react-app

And then application started working.

Remove the node_modules from your user directory i.e C:\Users\User