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

by

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:

  1. 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.
  2. Check if /Users/aliceparker/node_modules/webpack is outside your project directory.
    For example, you might have accidentally installed something in your home folder.
  3. 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…)

Contents hide
Answers:
Method 1
Method 2
Method 3
Method 4
Method 5
Method 6
Method 7
Method 8
Method 9
Method 10
Method 11
Method 12
Method 13
Method 14
Method 15
Method 16
Method 17
Method 18
Method 19
Method 20

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

In my case, I solved my problem in this way

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

Method 2

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!

Method 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:

problem solved

This what you put inside the .env file:

This what you put inside the .env file

Method 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

Method 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.

Method 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

Method 7

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.

Method 8

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

Method 9

In my case, I removed node_modules from my user’s directory. It worked.

Method 10

Remove the node_modules from your user directory i.e C:UsersUser

Method 11

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.

Method 12

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.

Method 13

I’ve been stuck on this for over an hour. I followed every step listed.
I deleted node_modules from my project and ALL node modules folders found on my mac.
Then I deleted packagelock and then ran npm install which gave me a fresh nm and packagelock.

Running npm start keeps giving me the same error. I know it’s not my code because I can checkout another branch and I get the same error.

This all started when I installed react testing library and upgraded react-scripts from 2.1.1 to 4..
I upgraded due to an error after running a test that said something about react-scripts (I can’t remember what it said exactly.)

I have since reset my package.json to the old working version with the old react-scripts version and without the testing libraries, followed all the above steps again, and still have the error.

I don’t have webpack in dependencies or dev dependencies.

Here is my previously working package.json

{
    "name": "bidrlfront",
    "version": "1.0.0",
    "private": true,
    "homepage": "./",
    "dependencies": {
      "@date-io/moment": "^1.3.13",
      "@material-ui/core": "^4.12.3",
      "@material-ui/icons": "^4.11.2",
      "@material-ui/pickers": "^3.3.10",
      "camelize": "^1.0.0",
      "chart.js": "^2.7.3",
      "classnames": "^2.2.6",
      "cross-env": "^5.2.0",
      "css-loader": "^1.0.0",
      "dateformat": "^3.0.3",
      "flux": "^3.1.3",
      "lodash.find": "^4.6.0",
      "moment": "^2.29.1",
      "node-sass": "^4.14.1",
      "react": "^16.14.0",
      "react-bootstrap": "^1.6.1",
      "react-dom": "^16.6.3",
      "react-ga": "^2.5.6",
      "react-loading": "^2.0.3",
      "react-quill": "^1.3.3",
      "react-router": "^4.3.1",
      "react-router-dom": "^5.2.0",
      "react-scripts": "2.1.1",
      "shards-react": "^1.0.0",
      "shortid": "^2.2.14"
    },
    "scripts": {
      "start": "react-scripts start",
      "build:prod": "cross-env REACT_APP_BASENAME=/demo/shards-dashboard-lite-react REACT_APP_GAID=UA-115105611-1 npm run build",
      "build": "cross-env REACT_APP_BASENAME=/demo/shards-dashboard-lite-react react-scripts build",
      "test": "react-scripts test",
      "scss": "node-sass --watch -include-path src/css -o css",
      "eject": "react-scripts eject",
      "gitty": "node g.js"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": [
      ">0.2%",
      "not dead",
      "not ie <= 11",
      "not op_mini all"
    ],
    "devDependencies": {
      "sass-loader": "^7.1.0"
    },
    "repository": {
      "type": "git",
      "url": "git+ssh://<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a0d031e2a08031e081f09010f1e4405180d">[email protected]</a>/rldev2/bidrl-app.git"
    },
    "keywords": [],
    "author": "Stephanie Raymos <<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d3e3f2c3420223e0d3f2121243c3824292c39223f3e632e2220">[email protected]</a>>",
    "license": "ISC"
  }

And here is my package.json when the errors started occuring

{
    "name": "bidrlfront",
    "version": "1.0.0",
    "private": true,
    "homepage": "./",
    "dependencies": {
        "@date-io/moment": "^1.3.13",
        "@material-ui/core": "^4.12.3",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/pickers": "^3.3.10",
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^12.0.0",
        "@testing-library/user-event": "^13.2.1",
        "camelize": "^1.0.0",
        "chart.js": "^2.7.3",
        "classnames": "^2.2.6",
        "cross-env": "^5.2.0",
        "css-loader": "^1.0.0",
        "dateformat": "^3.0.3",
        "flux": "^3.1.3",
        "lodash.find": "^4.6.0",
        "moment": "^2.29.1",
        "node-sass": "^4.14.1",
        "react": "^16.14.0",
        "react-bootstrap": "^1.6.1",
        "react-dom": "^16.6.3",
        "react-ga": "^2.5.6",
        "react-loading": "^2.0.3",
        "react-quill": "^1.3.3",
        "react-router": "^4.3.1",
        "react-router-dom": "^5.2.0",
        "react-scripts": "^2.1.1",
        "shards-react": "^1.0.0",
        "shortid": "^2.2.14"
    },
    "scripts": {
        "start": "react-scripts start",
        "build:prod": "cross-env REACT_APP_BASENAME=/demo/shards-dashboard-lite-react REACT_APP_GAID=UA-115105611-1 npm run build",
        "build": "cross-env REACT_APP_BASENAME=/demo/shards-dashboard-lite-react react-scripts build",
        "test": "react-scripts test",
        "scss": "node-sass --watch -include-path src/css -o css",
        "eject": "react-scripts eject",
        "gitty": "node g.js"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],
    "devDependencies": {
        "sass-loader": "^7.1.0"
    },
    "repository": {
        "type": "git",
        "url": "git+ssh://<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbab4a99dbfb4a9bfa8beb6b8a9f3b2afba">[email protected]</a>/rldev2/bidrl-app.git"
    },
    "keywords": [],
    "author": "Stephanie Raymos <<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="453637243c282a36053729292c34302c2124312a37366b262a28">[email protected]</a>>",
    "license": "ISC"
}

I had also globally installed testing library and fsevents prior to the error occuring but uninstalled those and trashed the folders on my mac.

I installed fsevents after receiving this error when I attempted to run my app after installing the testing libraries:
Error: fsevents unavailable (this watcher can only be used on Darwin)

I was getting a blank screen. This solved that issue.
I then got an error logging with my auth system.
I was using rxjs. I had to install that.
Got a react-scripts error and updated that to the latest version.
That’s when everything broke.
When I run npm ls webpack I get this:

├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5968686d8999a94919087b5c4dbc5dbc4">[email protected]</a>
│ └─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96e1f3f4e6f7f5fdd6a2b8a2a0b8a6">[email protected]</a>
│   └─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25514057564057085240475544464e08554950424c4b65140b110b10">[email protected]</a>
│     └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a0d1f180a1b19113a4e544e4c544a">[email protected]</a> deduped
├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1b3a4a0a2b5ecb2a2b3a8b1b5b281f3eff0eff0">[email protected]</a>
│ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11737073747d3c7d7e7075746351293f213f25">[email protected]</a>
│ │ └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="304755524051535b70041e04061e00">[email protected]</a> deduped
│ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="422131316f2e2d2326273002736c726c72">[email protected]</a>
│ │ └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8dfcdcad8c9cbc3e89c8699918699">[email protected]</a> deduped
│ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d0c6d9dcdbc198d9dad4d1d0c7f5879b849b84">[email protected]</a>
│ │ └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91e6f4f3e1f0f2fad1a5bfa5a7bfa1">[email protected]</a> deduped
│ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47212e2b226a2b2826232235077569776977">[email protected]</a>
│ │ └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3d4c6c1d3c2c0c8e3978d97958d93">[email protected]</a> deduped
│ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="badcd5c8d197cec997d9d2dfd9d1dfc897cddfd8cadbd9d197cad6cfddd3d497dbd6cefa8a948e948b8e">[email protected]</a>
│ │ └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="582f3d3a28393b33186c766c6e7668">[email protected]</a> deduped
│ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9d1cdd4d594cedcdbc9d8dad294c9d5ccded0d7f98d9789978994d8d5c9d1d8978b">[email protected]</a>
│ │ └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceb9abacbeafada58efae0faf8e0fe">[email protected]</a> deduped
│ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb6b2b5b2f6b8a8a8f6bea3afa9bab8aff6abb7aebcb2b59bebf5eff5e8">[email protected]</a>
│ │ └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e89f8d8a98898b83a8dcc6dcdec6d8">[email protected]</a> deduped
│ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c637c786561657669216f7f7f216d7f7f69787f217b696e7c6d6f67217c60796b65624c39223c223d">[email protected]</a>
│ │ └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="562133342637353d16627862607866">[email protected]</a> deduped
│ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7a4b6a4a4fabbb8b6b3b2a597e0f9e6f9e7">[email protected]</a>
│ │ └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a6b4b3a1b0b2ba91e5ffe0e8ffe0">[email protected]</a> deduped
│ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6829384859384db8193948697959ddb869a83919f98b6c7d8c7d8c6">[email protected]</a>
│ │ └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="265143445647454d66120812100816">[email protected]</a> deduped
│ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e3b3c226322212f2a2b3c0e7f607f607f">[email protected]</a>
│ │ └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="176072756776747c57233923213927">[email protected]</a> deduped
│ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90e7f5f2e0f1f3fbbdf4f5e6bde3f5e2e6f5e2d0a3bea1bea9">[email protected]</a>
│ │ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9becfef9ebfaf8f0b6fffeedb6f6f2fffff7feecfae9fedba8b5afb5ab">[email protected]</a>
│ │ │ └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f58290978594969eb5c1dbc1c3dbc5">[email protected]</a> deduped
│ │ └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5a2b0b7a5b4b6be95e1fbe1e3fbe5">[email protected]</a> deduped
│ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90e7f5f2e0f1f3fbbdfdf1fef9f6f5e3e4bde0fce5f7f9fed0a2bea0bea4">[email protected]</a>
│ │ └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8bfceee9fbeae8e0cbbfa5bfbda5bb">[email protected]</a> deduped
│ ├─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa8d9f988a9b9991baced4cbc3d4cb">[email protected]</a>
│ │ └─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a7f6d66636c736079277d6f687a6b6961277a667f6d63644a3b2439243a">[email protected]</a>
│ │   └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c3b292e3c2d2f270c7862787a627c">[email protected]</a> deduped
│ └─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b7c647960696473267c6e697b6a6860267b677e6c62654b38253d2538">[email protected]</a>
│   └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a4d5f584a5b59517a0e140e0c140a">[email protected]</a> deduped
└─┬ <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8efdeffdfda3e2e1efeaebfcceb9a0bda0bf">[email protected]</a>
  └── <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3c4d6d1c3d2d0d8f3879d87859d83">[email protected]</a> deduped

Method 14

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

Method 15

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.

Method 16

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.

Method 17

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.

Method 18

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:

  1. 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.
  2. Check if /home/omage/node_modules/webpack is outside your project directory.
    For example, you might have accidentally installed something in your home folder.
  3. 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

Method 19

create an .env file and put this line “SKIP_PREFLIGHT_CHECK=true”

example

Method 20

I created .env file and i added SKIP_PREFLIGHT_CHECK=true in it.

Note: don’t give any name to .env file, created filname must be .env

picture for more understanding


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x