Laravel 9使用laravel/ui安装React/Vue时npm依赖解析失败问题

问题描述 #

在全新Laravel 9项目中，通过laravel/ui配置React或Vue时，执行以下命令后：

composer require laravel/ui  
php artisan ui react # 或 php artisan ui vue
npm install

触发ERESOLVE unable to resolve dependency tree错误，核心冲突为：

• 项目依赖的Vite版本为4.0.4（vite@"^4.0.0"）
• 但@vitejs/plugin-react@2.2.0或@vitejs/plugin-vue@3.2.0要求的peer依赖是Vite 3.x（vite@"^3.0.0"）

React配置时的错误详情（中文翻译） #

microtech-007@microtech-007:/var/www/html/laravel-cms$ npm install
npm ERR! 代码 ERESOLVE
npm ERR! ERESOLVE 无法解析依赖树
npm ERR! 
npm ERR! 解析时：undefined@undefined
npm ERR! 已找到：vite@4.0.4
npm ERR! node_modules/vite
npm ERR!   开发依赖 vite@"^4.0.0" 来自根项目
npm ERR! 
npm ERR! 无法解析依赖：
npm ERR! peer vite@"^3.0.0" 来自 @vitejs/plugin-react@2.2.0
npm ERR! node_modules/@vitejs/plugin-react
npm ERR!   开发依赖 @vitejs/plugin-react@"^2.2.0" 来自根项目
npm ERR! 
npm ERR! 修复上游依赖冲突，或使用 --force 或 --legacy-peer-deps 参数重试
npm ERR! 以接受一个可能不正确（且潜在崩溃）的依赖解析结果。
npm ERR! 
npm ERR! 完整报告请查看：/home/microtech-007/.npm/eresolve-report.txt

npm ERR! 本次运行的完整日志位于：
npm ERR!     /home/microtech-007/.npm/_logs/2023-01-10T09_34_09_381Z-debug-0.log

Vue配置时的错误详情（中文翻译） #

microtech-007@microtech-007:/var/www/html/laravel-cms$ npm install
npm ERR! 代码 ERESOLVE
npm ERR! ERESOLVE 无法解析依赖树
npm ERR! 
npm ERR! 解析时：undefined@undefined
npm ERR! 已找到：vite@4.0.4
npm ERR! node_modules/vite
npm ERR!   开发依赖 vite@"^4.0.0" 来自根项目
npm ERR! 
npm ERR! 无法解析依赖：
npm ERR! peer vite@"^3.0.0" 来自 @vitejs/plugin-vue@3.2.0
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   开发依赖 @vitejs/plugin-vue@"^3.0.1" 来自根项目
npm ERR! 
npm ERR! 修复上游依赖冲突，或使用 --force 或 --legacy-peer-deps 参数重试
npm ERR! 以接受一个可能不正确（且潜在崩溃）的依赖解析结果。
npm ERR! 
npm ERR! 完整报告请查看：/home/microtech-007/.npm/eresolve-report.txt

npm ERR! 本次运行的完整日志位于：
npm ERR!     /home/microtech-007/.npm/_logs/2023-01-10T09_54_29_026Z-debug-0.log

解决方法 #

方法1：使用legacy-peer-deps参数（推荐） #

npm从v7开始默认严格校验peer依赖，该参数会回退到v6的宽松校验逻辑，直接绕过冲突：

npm install --legacy-peer-deps

方法2：降级Vite到3.x版本 #

手动修改项目根目录的package.json，将Vite版本从^4.0.0改为^3.2.0，然后重新执行安装：

npm install

方法3：等待laravel/ui官方更新 #

laravel/ui后续版本会适配Vite 4.x，若项目时间充裕可等待官方发布兼容版本后再操作。

内容的提问来源于stack exchange，提问作者Harsh Patel