NPM 启动返回错误，“项目依赖树可能有问题”答案

【问题标题】：NPM start returns error, "There might be a problem with the project dependency tree"NPM 启动返回错误，“项目依赖树可能有问题”
【发布时间】：2019-10-24 23:05:40
【问题描述】：

我是编码新手，并且对我无法正确设置 React 的原因有疑问。我上周挣扎，然后终于成功了。但是现在我又遇到了同样的问题，没有任何效果。

我有一个项目，我从 npx create-react-app 开始，然后当我 cd 进入项目时，我猜是这个问题：

项目依赖树可能有问题。它是可能不是 Create React App 中的错误，而是您需要修复的问题本地。

Create React App 提供的 react-scripts 包需要一个依赖：

“webpack”：“4.29.6”

不要尝试手动安装它：您的包管理器会这样做自动地。但是，检测到不同版本的 webpack 在树的更高处：

/Users/aliceparker/node_modules/webpack（版本：4.33.0）

已知手动安装不兼容的版本会导致难以调试的问题。

如果您希望忽略此检查，请添加 SKIP_PREFLIGHT_CHECK=true 到项目中的 .env 文件。那将永久禁用此消息，但您可能会遇到其他问题。

要修复依赖关系树，请尝试完全按照以下步骤操作顺序：

删除项目文件夹中的 package-lock.json（不是 package.json！）和/或 yarn.lock。

删除项目文件夹中的 node_modules。

从项目文件夹的 package.json 文件中的依赖项和/或 devDependencies 中删除“webpack”。

运行 npm install 或 yarn，具体取决于您使用的包管理器。

在大多数情况下，这应该足以解决问题。如果这有没有帮助，您可以尝试其他一些方法：

如果您使用 npm，请安装 yarn (http://yarnpkg.com/) 并使用它重复上述步骤。这可能会有所帮助，因为 npm 已知包提升问题，这些问题可能会在未来的版本中得到解决。

检查 /Users/aliceparker/node_modules/webpack 是否在您的项目目录之外。例如，您可能不小心在主文件夹中安装了一些东西。

尝试在您的项目文件夹中运行 npm ls webpack。这将告诉您安装了 webpack 的其他包（除了预期的 react-scripts）。

如果没有其他帮助，请将 SKIP_PREFLIGHT_CHECK=true 添加到 .env 文件在你的项目中。这将永久禁用此预检检查以防万一你想继续。

附：我们知道这条消息很长，但请阅读上面的步骤 :-) 我们希望它们对您有所帮助！

我已按照上述步骤操作。还是得到问题。我还全局卸载了 webpack 并重新安装了它。

这是我的 package.json 文件的样子：

`{
  "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"
    ]
  }
}`

谁能指导我解决这个问题？（Ps。我尝试创建一个新项目，但遇到同样的问题......）

【问题讨论】：

我关注了this，它对我有用。
请注意，由于删除 node_modules 或消除错误都不是生产的好解决方案，因此此警告可能来自不同阶段的两个不同包之间的冲突，需要不同的 webpack。例如，react 脚本需要一个 webpack，而故事书需要另一个。

标签： javascript node.js reactjs npm webpack

【解决方案1】：

问题是安装在您的用户目录中的 webpack。使用 npm 或手动删除它，一切都应该运行良好：参考：https://github.com/facebook/create-react-app/issues/6120

【讨论】：

谢谢，如何从我的用户目录中删除它？这一切都让我有点过头了！
是的，使用 npm install ... -g 标志安装，这与您的本地安装冲突

【解决方案2】：

您可以按照错误日志中的说明进行操作。

删除package-lock.json（不是package.json！）和/或yarn.lock 您的项目文件夹。
删除项目文件夹中的node_modules。
从依赖项和/或 devDependencies 中删除“webpack” package.json 项目文件夹中的文件。
运行 npm install 或 yarn，具体取决于您使用的包管理器。

【讨论】：

谢谢。我已经尝试过这些步骤，但请注意，我不确定我是否正确执行了第 3 步。我该怎么做？
打开 package.json，在 dependencies 或 devDependencies 下删除对 webpack 的引用。
那里没有对 webpack 的引用.. "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-脚本": "3.0.1" },

【解决方案3】：

在终端中，运行：

cd ~

然后：

ls

您应该会看到一个文件列表。如果node_modules 包含在该列表中（看起来应该如此），您想要删除该文件夹。您可以像这样在终端中这样做：

rm -rf node_modules

但请记住：这不会将文件夹发送到垃圾箱。它将不可撤销地删除它。 rm -rf 是一个强大的命令。如果这让您感到紧张，请输入 open .。这将在 Finder 中打开您的“主”(~) 目录，您可以在那里以熟悉的右键单击发送到垃圾箱的方式删除 node_modules。

希望有帮助！

【讨论】：

您是否收到与原始帖子中相同的错误消息？还是有什么不同？编辑：在运行npm start 之前，您是否cd 回到了项目目录？
npm 错误！代码 ELIFECYCLE npm 错误！ errno 1 npm 错误！ react-app@0.1.0 开始：react-scripts start npm ERR！退出状态 1 npm ERR！ npm 错误！ react-app@0.1.0 启动脚本失败。 npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。 npm 错误！可以在以下位置找到此运行的完整日志：npm ERR！ /Users/alice/.npm/_logs/2019-06-10T14_56_11_380Z-debug.log Alices-MBP-7:react-app alice$
嗯，也许这个帖子会有所帮助：stackoverflow.com/questions/42308879/npm-err-code-elifecycle
不幸的是没有:(当我完成这些步骤后，我又回到了同样的问题，重新安装 npm 然后 npm start。
只是为了说明，我已经完成了解决问题的所有步骤，不管它没有工作。我发现我的用户文件夹中有一个 node_modules 文件夹。我删除了这个，但不是我项目中的那个，然后可以使用“npm start”而没有任何问题。

【解决方案4】：

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

【讨论】：

【解决方案5】：

删除项目文件夹中的package-lock.json（不是package.json！）和/或yarn.lock。

删除项目文件夹中的node_modules。

从项目文件夹中 package.json 文件中的依赖项和/或 devDependencies 中删除 webpack。

运行 npm install 或 yarn，具体取决于您使用的包管理器。

我尝试了以上所有方法，但没有成功，但是一旦我将 .env 文件添加到我的项目结构中并将SKIP_PREFLIGHT_CHECK=true 添加到文件中。我可以绕过这个问题：

这是您放入 .env 文件中的内容：

【讨论】：

【解决方案6】：

就我而言，我以这种方式解决了我的问题

在文件夹react folder 的根目录下创建一个.env
在.env文件中输入SKIP_PREFLIGHT_CHECK=true
现在在 cmd npm start 中运行。

【讨论】：

【解决方案7】：

对我有用的解决方案

将SKIP_PREFLIGHT_CHECK=true 添加到项目中的 .env 文件中。不知道以后会不会出错。

【讨论】：

【解决方案8】：

按照错误说明执行操作以使其正常工作。
在你的项目目录下创建一个.env文件并添加SKIP_PREFLIGHT_CHECK=true，就可以了。

【讨论】：

这不是解决方案，在大多数情况下它只会隐藏错误，但稍后会出现其他问题。

【解决方案9】：

我以前遇到过同样的问题，我解决了。 create-react-app 已经提供了webpack(v4.29.6)，与/Users/aliceparker/node_modules 中的webpack(v4.33.0) 冲突。

因此，如果您删除第二个 webpack(v4.33.0)，它将运行。

【讨论】：

【解决方案10】：

我使用 npx 创建了项目，并且最初使用 babel-eslint 时遇到了同样的错误。我遵循@davidflyod91 方法，它对我有用。我不满意从 ~ 目录（在我的 MAC 中）删除整个 node_module 文件夹（我的意思是说安装 -g 模块的位置）。因此，我从 ~/node_modules 目录中的 node_modules 中放回了 node_modules 和已删除的文件夹，并尝试运行应用程序（npm run start）。

网页包
巴别塔
eslint
创建反应应用程序

然后应用程序开始工作。

【讨论】：

【解决方案11】：

你需要尝试首先，创建一个名为.env 的文件并存储SKIP_PREFLIGHT_CHECK=true

root/.env 和.env 应该包含SKIP_PREFLIGHT_CHECK=true

【讨论】：

【解决方案12】：

将 "webpack": "4.44.2" 添加到 package.json 的依赖项中。
创建.env 并输入SKIP_PREFLIGHT_CHECK=true 这将解决您的问题。

【讨论】：

【解决方案13】：

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

【讨论】：

我已经尝试了上述所有方法，但我完全忘记了从 C:\Users\user 文件夹中删除我的节点模块。非常感谢@Emmanuel

【解决方案14】：

创建一个.env 文件或编辑现有文件。
SKIP_PREFLIGHT_CHECK = true 将此写入 .env 文件。
重启开发服务器。

我这样解决了问题。

【讨论】：

【解决方案15】：

将"webpack": "4.44.2" 行添加到package.json 文件的依赖项中。创建.env文件，在里面输入SKIP_PREFLIGHT_CHECK=true，就可以解决你的问题了。

【讨论】：

这并不能解决问题，它是一种禁用预检检查的解决方法，可能会产生其他后果。

【解决方案16】：

要修复依赖关系树，请尝试按照以下步骤进行操作：

删除项目文件夹中的 package-lock.json（不是 package.json！）和/或 yarn.lock。
删除项目文件夹中的 node_modules。
从项目文件夹的 package.json 文件中的依赖项和/或 devDependencies 中删除“webpack”。
运行 npm install 或 yarn，具体取决于您使用的包管理器。

在大多数情况下，这应该足以解决问题。如果这没有帮助，您可以尝试其他一些方法：

如果您使用 npm，请安装 yarn (http://yarnpkg.com/) 并使用它重复上述步骤。这可能会有所帮助，因为 npm 已知包提升问题，这些问题可能会在未来的版本中得到解决。
检查 /home/omage/node_modules/webpack 是否在您的项目目录之外。例如，您可能不小心在主文件夹中安装了一些东西。
尝试在您的项目文件夹中运行 npm ls webpack。这将告诉您安装了 webpack 的其他包（除了预期的 react-scripts）。

如果没有其他帮助，请将 SKIP_PREFLIGHT_CHECK=true 添加到项目中的 .env 文件中。如果您仍然想继续，这将永久禁用此预检检查。

回答修复依赖树

要解决依赖树问题，您必须从本地计算机中删除 node-modules 文件并运行 npm start 以启动 localhost

【讨论】：

【解决方案17】：

就我而言，我从用户目录中删除了 node_modules。它奏效了。

【讨论】：

【解决方案18】：

我已经坚持了一个多小时。我遵循列出的每一步。我从我的项目中删除了 node_modules，并在我的 mac 上找到了所有节点模块文件夹。然后我删除了 packagelock，然后运行 npm install，这给了我一个新的 nm 和 packagelock。

运行npm start 不断给我同样的错误。我知道这不是我的代码，因为我可以签出另一个分支并得到同样的错误。

这一切都是从我安装 react 测试库并将 react-scripts 从 2.1.1 升级到 4 开始的。. 我在运行一个关于 react-scripts 的测试后由于错误而升级（我不记得它到底说了什么。）

我已经用旧的 react-scripts 版本和没有测试库将我的 package.json 重置为旧的工作版本，再次执行上述所有步骤，但仍然有错误。

我在依赖项或开发依赖项中没有 webpack。

这是我以前工作的 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"
  }

当错误开始发生时，这是我的 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",
        "@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"
}

在发生错误之前，我还全局安装了测试库和 fsevents，但卸载了这些并删除了我的 mac 上的文件夹。

我在安装测试库后尝试运行我的应用程序时收到此错误后安装了 fsevents：错误：fsevents不可用（这个watcher只能在Darwin上使用）

我得到一个空白屏幕。这解决了这个问题。然后我的身份验证系统出现错误记录。我正在使用 rxjs。我不得不安装它。收到 react-scripts 错误并将其更新到最新版本。就在那时，一切都破裂了。当我运行npm ls webpack 时，我得到了这个：

├─┬ 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

【讨论】：

【解决方案19】：

创建一个 .env 文件并将这一行放入“SKIP_PREFLIGHT_CHECK=true”

example

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。