React 18.2.0项目react-google-login依赖冲突Netlify构建失败

问题表现 #

在版本为^18.2.0的React根项目中引入react-google-login npm包时触发构建错误，Netlify构建日志如下：

10:50:18 AM: Build ready to start
10:50:21 AM: build-image version: 72a309a113b53ef075815b129953617827965e48 (focal)
10:50:21 AM: build-image tag: v4.8.2
10:50:21 AM: buildbot version: 515e5c33287d8b909c004fcf2e460e8645e8c1c6
10:50:21 AM: Fetching cached dependencies
10:50:21 AM: Failed to fetch cache, continuing with build
10:50:21 AM: Starting to prepare the repo for build
10:50:21 AM: No cached dependencies found. Cloning fresh repo
10:50:21 AM: git clone 对应项目仓库地址
10:50:22 AM: Preparing Git Reference refs/heads/master
10:50:22 AM: Parsing package.json dependencies
10:50:23 AM: Starting build script
10:50:23 AM: Installing dependencies
10:50:23 AM: Python version set to 2.7
10:50:24 AM: v16.15.1 is already installed.
10:50:25 AM: Now using node v16.15.1 (npm v8.11.0)
10:50:25 AM: Started restoring cached build plugins
10:50:25 AM: Finished restoring cached build plugins
10:50:25 AM: Attempting ruby version 2.7.2, read from environment
10:50:26 AM: Using ruby version 2.7.2
10:50:26 AM: Using PHP version 8.0
10:50:27 AM: No npm workspaces detected
10:50:27 AM: Started restoring cached node modules
10:50:27 AM: Finished restoring cached node modules
10:50:27 AM: Installing NPM modules using NPM version 8.11.0
10:50:27 AM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
10:50:27 AM: npm WARN config location in the cache, and they are managed by
10:50:27 AM: npm WARN config     `cacache`.
10:50:28 AM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
10:50:28 AM: npm WARN config location in the cache, and they are managed by
10:50:28 AM: npm WARN config     `cacache`.
10:50:30 AM: npm ERR! code ERESOLVE
10:50:30 AM: npm ERR! ERESOLVE could not resolve
10:50:30 AM: npm ERR!
10:50:30 AM: npm ERR! While resolving: react-google-login@5.2.2
10:50:30 AM: Creating deploy upload records
10:50:30 AM: npm ERR! Found: react@18.2.0
10:50:30 AM: npm ERR! node_modules/react
10:50:30 AM: npm ERR!   react@"^18.2.0" from the root project
10:50:30 AM: npm ERR!   peer react@"^18.0.0" from @testing-library/react@13.3.0
10:50:30 AM: npm ERR!   node_modules/@testing-library/react
10:50:30 AM: Failed during stage 'building site': Build script returned non-zero exit code: 1
10:50:30 AM: npm ERR!     @testing-library/react@"^13.3.0" from the root project
10:50:30 AM: npm ERR!   2 more (react-dom, react-scripts)
10:50:30 AM: npm ERR!
10:50:30 AM: npm ERR! Could not resolve dependency:
10:50:30 AM: npm ERR! peer react@"^16 || ^17" from react-google-login@5.2.2
10:50:30 AM: npm ERR! node_modules/react-google-login
10:50:30 AM: npm ERR!   react-google-login@"^5.2.2" from the root project
10:50:30 AM: npm ERR!
10:50:30 AM: npm ERR! Conflicting peer dependency: react@17.0.2
10:50:30 AM: npm ERR! node_modules/react
10:50:30 AM: npm ERR!   peer react@"^16 || ^17" from react-google-login@5.2.2
10:50:30 AM: npm ERR!   node_modules/react-google-login
10:50:30 AM: npm ERR!     react-google-login@"^5.2.2" from the root project
10:50:30 AM: npm ERR!
10:50:30 AM: npm ERR! Fix the upstream dependency conflict, or retry
10:50:30 AM: npm ERR! this command with --force, or --legacy-peer-deps
10:50:30 AM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
10:50:30 AM: npm ERR!
10:50:30 AM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
10:50:30 AM: npm ERR! A complete log of this run can be found in:
10:50:30 AM: npm ERR!     /opt/buildhome/.npm/_logs/2022-07-01T05_20_28_238Z-debug-0.log
10:50:30 AM: Error during NPM install
10:50:30 AM: Build was terminated: Build script returned non-zero exit code: 1
10:50:30 AM: Failing build: Failed to build site
10:50:30 AM: Finished processing build request in 9.18683257s

本地执行npm install react-google-login --legacy-peer-deps可以完成安装，但Netlify构建流程依旧失败，同时本地执行普通npm install命令时终端会提示存在6个高危安全漏洞。

错误根因 #

• 依赖版本不兼容：react-google-login@5.2.2声明的peer依赖仅支持React 16、React 17大版本，和项目使用的React 18.2.0存在版本冲突，npm 8.x版本默认开启严格peer依赖校验，检测到冲突会直接抛出ERESOLVE错误终止安装流程。
• 构建配置不匹配：本地安装时添加的--legacy-peer-deps参数仅对单次本地安装生效，Netlify云端构建默认执行无参数的npm install命令，不会读取本地的安装参数，因此依旧会触发依赖校验失败。
• 依赖本身存在风险：react-google-login包已经停止维护多年，代码中存在未修复的高危安全漏洞，这是本地安装提示漏洞告警的直接原因。

解决方案 #

方案1：临时绕过校验（不推荐，存在兼容和安全风险） #

如果需要短时间内快速恢复构建，可以通过配置npm参数让云端构建也跳过peer依赖校验：

1. 在项目根目录新建.npmrc文件，写入以下配置：

legacy-peer-deps=true

2. 将该文件提交到代码仓库，重新触发Netlify构建即可。

注意：该方案仅绕过依赖安装阶段的校验，react-google-login本身未对React 18做适配，页面运行时可能出现钩子报错、渲染异常等问题，同时包自带的高危漏洞也不会被修复。

方案2：迁移到官方维护的新版SDK（推荐，长期稳定） #

直接废弃停止维护的react-google-login，替换为Google官方维护的React OAuth SDK，该SDK原生兼容React 18，无已知高危安全漏洞，且支持Google最新的身份认证授权流程：

1. 卸载旧的废弃依赖：

npm uninstall react-google-login

2. 安装官方新版依赖：

npm install @react-oauth/google

3. 参照新版SDK的用法替换原有Google登录逻辑即可，API设计更简洁，不存在版本兼容问题。

内容的提问来源于stack exchange，提问作者Abhi Dadhaniya