我正在尝试在 netlify 上托管我的 React 网站，但出现 npm 安装错误

Question

我需要一些帮助！我正在尝试在 netlify 上托管我的 reacy 网站，但发生 npm 安装错误。你能帮我解决这个问题吗？

这里有一个错误评论

12:28:19 AM: Installing NPM modules using NPM version 7.24.0
12:28:21 AM: npm ERR! code ERESOLVE
12:28:21 AM: npm ERR! ERESOLVE unable to resolve dependency tree
12:28:21 AM: npm ERR!
12:28:21 AM: npm ERR! While resolving: simplefolio@1.0.1
12:28:21 AM: npm ERR! Found: webpack@5.54.0
12:28:21 AM: npm ERR! node_modules/webpack
12:28:21 AM: npm ERR!   dev webpack@"^5.40.0" from the root project
12:28:21 AM: npm ERR!
12:28:21 AM: npm ERR! Could not resolve dependency:
12:28:21 AM: npm ERR! peer webpack@"^4.0.0" from optimize-css-assets-webpack-plugin@6.0.1
12:28:21 AM: npm ERR! node_modules/optimize-css-assets-webpack-plugin
12:28:21 AM: npm ERR!   dev optimize-css-assets-webpack-plugin@"^6.0.1" from the root project
12:28:21 AM: npm ERR!
12:28:21 AM: npm ERR! Fix the upstream dependency conflict, or retry
12:28:21 AM: npm ERR! this command with --force, or --legacy-peer-deps
12:28:21 AM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
12:28:21 AM: npm ERR!
12:28:21 AM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
12:28:21 AM: npm ERR! A complete log of this run can be found in:
12:28:21 AM: npm ERR!     /opt/buildhome/.npm/_logs/2021-09-27T15_28_21_272Z-debug.log

提前谢谢你的帮助

Answer 1

有多种方法可以解决此问题，其中一种快速且简单的解决方案是

1. 转到 Netlify 中的项目
2. 转到Site setting最右侧的选项卡
3. 转到Build & deploy部分 > 选择Environment
4. 添加两个新的Environment variableskey: CIwith value:false和 key: NPM_FLAGSwith value:--legacy-peer-deps
5. 点击save然后redeploy你的网站

希望这有帮助。投票保存以供将来使用。

Answer 2

即使您不是npm直接调用，而是通过 调用gatsby build，您仍然应该能够配置npm为在文件中使用所需的标志.npmrc。只需添加一个名为.npmrc您的存储库根目录的文件，其中包含以下内容

legacy-peer-deps=true

Answer 3

这个问题是由于package.json文件中的包依赖冲突导致的，正常情况下会运行

npm install <package-name> --legacy-peer-deps

忽略这些依赖冲突。但 Netlify 不知道添加了此标志npm install，因此安装失败。

解决这个问题的简单方法是在 Netlify 中添加一个环境变量NPM_FLAGS并为其分配 npm 标志的值--legacy-peer-deps。

怎么做

• 转到设置中的部署部分。您可以使用此链接https://app.netlify.com/sites/{site-name}/settings/deploys。将 {site-name} 替换为您的网站名称。
• 滚动到环境变量部分。
• 单击Edit variables并添加该对。NPM_FLAGS在左边和--legacy-peer-deps右边。您还可以添加运行时使用的其他标志，npm install因为 Netlify 在安装依赖项时将使用此标志。

Answer 4

您好，欢迎来到社区！

node_modules和package-lock.json可能不再与您当前的 npm 版本兼容。

在本地安装中尝试：

rm node_modules
rm package-lock.json
npm install

然后在github上重新提交并重新部署到Netlify！