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

Question

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

Abd*_*lah 2 hosting node.js npm reactjs vercel

概要
经过大约一个月的工作，我可以部署我的项目。我克隆了该文件夹（以防万一）并使用 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: react-notifications-menu@1.0.6
[13:29:02.776] npm ERR! Found: react@18.2.0
[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/react@11.10.5
[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/styled@11.10.5
[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 react-notifications-menu@1.0.6
[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: react@16.14.0
[13:29:02.777] npm ERR! node_modules/react
[13:29:02.777] npm ERR!   peer react@"^15.0.0 || ^16.0.0" from react-notifications-menu@1.0.6
[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

Run Code Online (Sandbox Code Playgroud)

Github 仓库

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

在克隆文件夹之前