如何在vite build中添加--legacy-peer-deps或--force解决依赖冲突

问题描述 #

项目使用react-typed@1.2.0，安装时必须添加--legacy-peer-deps参数。执行vite build部署时触发依赖冲突报错，具体错误日志如下：

8:59:31 AM: npm ERR! node_modules/react
8:59:31 AM: npm ERR!   react@"^18.2.0" from the root project
8:59:31 AM: npm ERR!   peer react@"^18.2.0" from react-dom@18.2.0
8:59:31 AM: npm ERR!   node_modules/react-dom
8:59:31 AM: npm ERR!     react-dom@"^18.2.0" from the root project
8:59:31 AM: npm ERR!
8:59:31 AM: npm ERR! Could not resolve dependency:
8:59:31 AM: npm ERR! peer react@"^16.3.0" from react-typed@1.2.0
8:59:31 AM: npm ERR! node_modules/react-typed
8:59:31 AM: npm ERR!   react-typed@"^1.2.0" from the root project
8:59:31 AM: npm ERR!
8:59:31 AM: npm ERR! Conflicting peer dependency: react@16.14.0
8:59:31 AM: npm ERR! node_modules/react
8:59:31 AM: npm ERR!   peer react@"^16.3.0" from react-typed@1.2.0
8:59:31 AM: npm ERR!   node_modules/react-typed
8:59:31 AM: npm ERR!     react-typed@"^1.2.0" from the root project
8:59:31 AM: npm ERR!
8:59:31 AM: npm ERR! Fix the upstream dependency conflict, or retry
8:59:31 AM: npm ERR! this command with --force, or --legacy-peer-deps
8:59:31 AM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
8:59:31 AM: npm ERR!
8:59:31 AM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
8:59:31 AM: npm ERR! A complete log of this run can be found in:
8:59:31 AM: npm ERR!     /opt/buildhome/.npm/_logs/2023-03-01T07_59_31_432Z-debug-0.log
8:59:31 AM: Error during npm install
8:59:31 AM: Build was terminated: Build script returned non-zero exit code: 1
8:59:31 AM: Failing build: Failed to build site
8:59:32 AM: Finished processing build request in 7.285s

尝试执行vite build --legacy-peer-deps后，报错问题依然存在。

原因分析 #

错误发生在npm install阶段，而非vite build执行过程中。--legacy-peer-deps是npm的专属参数，不属于Vite命令的参数范畴，直接附加在vite build后无法生效。

解决方案 #

1. 本地构建分步执行 #

先执行带参数的依赖安装命令，再执行Vite构建：

npm install --legacy-peer-deps
vite build

2. 集成到package.json脚本 #

修改package.json中的scripts字段，将安装与构建步骤合并，确保安装阶段自动携带参数：

{
  "scripts": {
    "build": "npm install --legacy-peer-deps && vite build",
    "install": "npm install --legacy-peer-deps"
  }
}

之后直接执行npm run build即可完成依赖安装与项目构建。

3. CI/CD平台部署配置 #

如果在Netlify、Vercel等平台部署，将构建命令修改为：

npm install --legacy-peer-deps && vite build

平台会先执行带参数的依赖安装，再触发Vite构建流程。

4. 备选方案：使用--force参数 #

如果--legacy-peer-deps效果不佳，可替换为--force参数，用法与上述一致：

npm install --force && vite build

内容的提问来源于stack exchange，提问作者Sammy Bammy Studios