'npm start' 返回错误：“项目依赖树可能有问题”

Question

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

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

Answer 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!

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

• 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 9

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

Answer 10

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 11

从您的用户目录中删除 node_modules，即 C:\Users\User

Answer 12

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://git@bitbucket.org/rldev2/bidrl-app.git"
    },
    "keywords": [],
    "author": "Stephanie Raymos <sraymos@rlliquidators.com>",
    "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://git@bitbucket.org/rldev2/bidrl-app.git"
    },
    "keywords": [],
    "author": "Stephanie Raymos <sraymos@rlliquidators.com>",
    "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:

├─┬ css-loader@1.0.1
│ └─┬ webpack@4.46.0
│   └─┬ terser-webpack-plugin@1.4.5
│     └── webpack@4.46.0 deduped
├─┬ react-scripts@2.1.1
│ ├─┬ babel-loader@8.0.4
│ │ └── webpack@4.46.0 deduped
│ ├─┬ css-loader@1.0.0
│ │ └── webpack@4.19.1 deduped
│ ├─┬ eslint-loader@2.1.1
│ │ └── webpack@4.46.0 deduped
│ ├─┬ file-loader@2.0.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ fork-ts-checker-webpack-plugin-alt@0.4.14
│ │ └── webpack@4.46.0 deduped
│ ├─┬ html-webpack-plugin@4.0.0-alpha.2
│ │ └── webpack@4.46.0 deduped
│ ├─┬ mini-css-extract-plugin@0.4.3
│ │ └── webpack@4.46.0 deduped
│ ├─┬ optimize-css-assets-webpack-plugin@5.0.1
│ │ └── webpack@4.46.0 deduped
│ ├─┬ sass-loader@7.1.0
│ │ └── webpack@4.19.1 deduped
│ ├─┬ terser-webpack-plugin@1.1.0
│ │ └── webpack@4.46.0 deduped
│ ├─┬ url-loader@1.1.1
│ │ └── webpack@4.46.0 deduped
│ ├─┬ webpack-dev-server@3.1.9
│ │ ├─┬ webpack-dev-middleware@3.4.0
│ │ │ └── webpack@4.46.0 deduped
│ │ └── webpack@4.46.0 deduped
│ ├─┬ webpack-manifest-plugin@2.0.4
│ │ └── webpack@4.46.0 deduped
│ ├─┬ webpack@4.19.1
│ │ └─┬ uglifyjs-webpack-plugin@1.3.0
│ │   └── webpack@4.46.0 deduped
│ └─┬ workbox-webpack-plugin@3.6.3
│   └── webpack@4.46.0 deduped
└─┬ sass-loader@7.3.1
  └── webpack@4.46.0 deduped

Answer 13

当您制作所有项目时，问题在于您计算机上的树文件夹，请尝试文件夹中不存在的应用程序，我希望它会起作用

Answer 14

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 15

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 16

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 17

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 18

You can simply delete the node_module folder. it will work. Go to the root and then run the following command

sudo rm -rf /Users/yourname/node_modules

Answer 19

The simple solution is just to install the webpack version shown in error.

npm install webpack@version show in error.

I hope this will help you. Thank you very much.

Answer 20

I had the same error and none of the solutions helped me fully. Then I actually followed the instructions on the error and the issue was resolved

1. Deleted package-lock.json
2. Delete node_modules in the project folder.
3. Make sure to run npm install. If you dont and go straight to npm start you will have a "react-scripts: command not found error"

Edit:Issue reoccured and was resolved by adding the.env file to the root of my project and added SKIP_PREFLIGHT_CHECK=true into the file.

Issue was fully resolved now.

Answer 21

• First try npm install , then npm start
• If it doesn't work then run npm audit
• Then try npm audit fix or npm audit fix --force , then npm install , then npm start
• If it still doesn't work, delete node modules , package-lock.json and again try npm install , then npm start

Still getting error? Set SKIP_PREFLIGHT_CHECK=true inside of .env file

And try again .

Answer 22

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

Answer 23

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

example

Answer 24

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