node.js - 如何修复 Vercel Hosting 部署的 ReactJS 的 npm Err ERESOLVE 对等依赖性

Question

剧情简介
经过大约一个月的工作，我可以部署我的项目。我克隆了该文件夹(以防万一)并使用 Git 将其上传到我的 GitHub 存储库。然后我登录到 Vercel 的托管，选择他们的免费爱好定价(免费的)并连接我的 Github 帐户，我将我的作品集上传到该帐户。然后我按下“部署”并收到一个以“npm Err code ERESOLVE”开头的错误，请查看标记为错误的部分。经过大约 2-3 小时的研究和 Stack Overflow 查找，我找到了答案。

上下文
在 VS Code 上完成为期一个月的项目后，我决定克隆该文件夹并删除外部目录内的所有内容。这意味着我最初拥有 VScode 文件夹和 npx 创建的另一个文件夹(图 1)。但是，为了将其上传到 Github，我将其从创建的以下文件夹中删除，并将其放入主外部文件夹中(参见图 2)。然后，我下载了 Git(使用其版本进行了检查)，并将复制的文件夹上传到名为 Portfolio-new 的 GitHub 存储库(选中下面标记的 Github 存储库)。完成后，我前往托管平台 Vercel，并决定在那里托管我的 React 项目。车辆集成成功了，因此他们在自己的平台上运行 npm start。因此，在按“部署”后，我无法控制部署。按部署后，我收到依赖项错误(请参阅下面的错误)。

问题
回顾一下，如上所述，问题在于 Vercel 是它的系统，我无法控制它如何执行 npm start (你会明白为什么这很重要)。所以运行的时候就会报错。这意味着我必须修复代码，而不是如何运行它。

为什么不使用 --force 或 --legacy-peer-deps
问题是 Vercel 的系统需要让我控制它的命令。因此，我无法使用这两个命令中的任何一个来使其强制运行。这意味着应发布的答案必须修复实际错误，而不是临时复飞。再次重复一遍，我不能使用这两个命令!

[13:28:58.885] Cloning github.com/Abdjsjiski/portfolio-new (Branch: main, Commit: 5f53564)
[13:28:58.889] Skipping build cache since Vercel CLI used --force option
[13:28:59.634] Cloning completed: 748.787ms
[13:29:00.056] Running "vercel build"
[13:29:00.521] Vercel CLI 28.10.0
[13:29:01.088] Installing dependencies...
[13:29:02.759] npm ERR! code ERESOLVE
[13:29:02.775] npm ERR! ERESOLVE could not resolve
[13:29:02.775] npm ERR! 
[13:29:02.775] npm ERR! While resolving: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef9d8a8e8c9bc281809b8689868c8e9b8680819cc2828a819aafdec1dfc1d9" rel="noreferrer noopener nofollow">[email protected]</a>
[13:29:02.776] npm ERR! Found: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b091e1a180f3b4a435549554b" rel="noreferrer noopener nofollow">[email protected]</a>
[13:29:02.776] npm ERR! node_modules/react
[13:29:02.776] npm ERR!   react@"^18.2.0" from the root project
[13:29:02.776] npm ERR!   peer react@">=16.8.0" from @emotion/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1163747072655120203f20213f24" rel="noreferrer noopener nofollow">[email protected]</a>
[13:29:02.776] npm ERR!   node_modules/@emotion/react
[13:29:02.776] npm ERR!     @emotion/react@"^11.10.5" from the root project
[13:29:02.776] npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85f6f1fce9e0e1c5b4b4abb4b5abb0" rel="noreferrer noopener nofollow">[email protected]</a>
[13:29:02.776] npm ERR!     node_modules/@emotion/styled
[13:29:02.776] npm ERR!       @emotion/styled@"^11.10.5" from the root project
[13:29:02.776] npm ERR!       3 more (@mui/material, @mui/styled-engine, @mui/system)
[13:29:02.776] npm ERR!     3 more (@mui/material, @mui/styled-engine, @mui/system)
[13:29:02.776] npm ERR!   41 more (@emotion/styled, ...)
[13:29:02.777] npm ERR! 
[13:29:02.777] npm ERR! Could not resolve dependency:
[13:29:02.777] npm ERR! peer react@"^15.0.0 || ^16.0.0" from <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aad8cfcbc9de87c4c5dec3ccc3c9cbdec3c5c4d987c7cfc4dfea9b849a849c" rel="noreferrer noopener nofollow">[email protected]</a>
[13:29:02.777] npm ERR! node_modules/react-notifications-menu
[13:29:02.777] npm ERR!   react-notifications-menu@"^1.0.6" from the root project
[13:29:02.777] npm ERR! 
[13:29:02.777] npm ERR! Conflicting peer dependency: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f08295919384b0c1c6dec1c4dec0" rel="noreferrer noopener nofollow">[email protected]</a>
[13:29:02.777] npm ERR! node_modules/react
[13:29:02.777] npm ERR!   peer react@"^15.0.0 || ^16.0.0" from <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e99b8c888a9dc487869d808f808a889d8086879ac4848c879ca9d8c7d9c7df" rel="noreferrer noopener nofollow">[email protected]</a>
[13:29:02.777] npm ERR!   node_modules/react-notifications-menu
[13:29:02.777] npm ERR!     react-notifications-menu@"^1.0.6" from the root project
[13:29:02.777] npm ERR! 
[13:29:02.778] npm ERR! Fix the upstream dependency conflict, or retry
[13:29:02.778] npm ERR! this command with --force, or --legacy-peer-deps
[13:29:02.778] npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
[13:29:02.778] npm ERR! 
[13:29:02.778] npm ERR! See /vercel/.npm/eresolve-report.txt for a full report.
[13:29:02.778] 
[13:29:02.778] npm ERR! A complete log of this run can be found in:
[13:29:02.778] npm ERR!     /vercel/.npm/_logs/2022-12-31T18_29_01_308Z-debug-0.log
[13:29:02.796] Error: Command "npm install" exited with 1

Github Repo

如果现在还不明显，我只使用纯 ReactJS

在克隆文件夹之前

克隆文件夹后，将所有内容放在外面

我知道有很多与我类似的问题，但我的问题更多的是如何解决实际问题，然后是其他临时问题+如何正确部署它而不是将其留在 Vercel 上

在发布之前，我做了一些研究，其中包括以下内容:

1. 无论如何都要使用 --force 或 --legacy-peer-deps 命令
2. 删除 Node 模块和 package-lock.json 并执行 npm install
3. 强制删除缓存
4. 审核修复 - 强制并审核修复正常
5. npm 基金
6. 强制重新安装/更新我的所有依赖项
7. 更新 react 脚本
8. 使用 -- 保存并重试所有命令这些都不起作用。我将 GitHub 存储库更新到最新版本，重新部署，但出现了相同的错误。

为什么您的问题与其他问题不同
它大多与代码无关，而是与托管平台相关，因此正常的答案不会像上面给出的那样起作用，但要解决问题，您需要修复代码本身

Answer 1

好的，经过三个多小时的搜索，我找到了答案!!

在Vercel中，转到更改命令行并查找npm install或yarn install

请注意，这更像是一种对我的问题具有讽刺意味的解决方法，但它已经足够了

然后，您可以将命令更改为 npm install --force ，它将进行部署，但如果有人能够解决发生的实际问题，我仍然会非常高兴