NPM start returns error, "There might be a problem with the project dependency tree"

Question

I'm new to coding and having issues with why I can no longer get React set up correctly. I struggled 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 guess 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 (http://yarnpkg.com/) 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...)

Answer 1

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!

Answer 2

in my case i solve my problem in these way

1. create a .env at the root of the folder of react folder
2. type SKIP_PREFLIGHT_CHECK=true in side .env file
3. now run in cmd npm start .

Answer 3

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:

This what you put inside the .env file:

Answer 4

you need to try first, make a file with the name .env and store the SKIP_PREFLIGHT_CHECK=true

root/.env and .env should contain SKIP_PREFLIGHT_CHECK=true

Answer 5

1. create a .env file or edit exiting one.
2. SKIP_PREFLIGHT_CHECK = true write this to .env file.
3. restart dev server.

I solved the problem this way.

Answer 6

The issue is the webpack installed in your user directory. Remove it with npm or by hand and all should run fine: ref: https://github.com/facebook/create-react-app/issues/6120

Answer 7

You can follow the instructions given in the error log.

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.

Answer 8

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.

Answer 9

• add "webpack": "4.44.2" to dependencies of package.json.
• create .env and type SKIP_PREFLIGHT_CHECK=true That will be solved your problem.

Answer 10

Add the line"webpack": "4.44.2" to the dependencies of your package.json file. Create the .env file, and type SKIP_PREFLIGHT_CHECK=true inside, which will solve your problem.

Answer 11

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

Answer 12

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.

Answer 13

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.

Answer 14

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.

Answer 15

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

Answer 16

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 (http://yarnpkg.com/) 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 /home/omage/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.

Answer To fix the dependency tree

to solve a dependency tree problem, you have to delete the node-modules file from your local computer and run npm start , to start the localhost