Laravel安装Bootstrap时遭遇vite与npm依赖冲突问题求助

问题描述 #

我是Laravel新手，尝试本地安装Bootstrap以避免使用CDN，却遇到npm依赖解析错误。错误显示@vitejs/plugin-react@2.2.0要求peer依赖vite@"^3.0.0"，但当前项目使用的是vite@4.3.9，存在版本冲突。

错误日志详情 #

C:\Users\User\AppData\Local\npm-cache_logs\2023-07-28T04_14_56_286Z-debug-0.log

npm依赖解析错误报告 #

解析时出错：@vitejs/plugin-react@2.2.0
已找到：vite@4.3.9
node_modules/vite
根项目中的dev依赖 vite@"^4.0.0"
laravel-vite-plugin@0.7.8的peer依赖要求 vite@"^3.0.0 || ^4.0.0"
node_modules/laravel-vite-plugin
根项目中的dev依赖 laravel-vite-plugin@"^0.7.8"
vite-plugin-full-reload@1.0.5的peer依赖要求 vite@"^2 || ^3 || ^4"
node_modules/vite-plugin-full-reload
laravel-vite-plugin@0.7.8依赖的vite-plugin-full-reload@"^1.0.5"
node_modules/laravel-vite-plugin
根项目中的dev依赖 laravel-vite-plugin@"^0.7.8"

无法解析依赖：
@vitejs/plugin-react@2.2.0的peer依赖要求 vite@"^3.0.0"
node_modules/@vitejs/plugin-react
根项目中的dev依赖 @vitejs/plugin-react@"^2.2.0"

冲突的peer依赖：vite@3.2.7
node_modules/vite
@vitejs/plugin-react@2.2.0的peer依赖要求 vite@"^3.0.0"
node_modules/@vitejs/plugin-react
根项目中的dev依赖 @vitejs/plugin-react@"^2.2.0"

修复上游依赖冲突，或使用--force或--legacy-peer-deps参数重试命令，以接受不正确（可能有问题）的依赖解析。

当前package.json内容 #

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "@vitejs/plugin-react": "^2.2.0",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "laravel-vite-plugin": "^0.7.5",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "sass": "^1.56.1",
        "vite": "^4.0.0"
    }
}

npm list vite输出 #

PS C:\Users\User\Desktop\LaravelTest\Report-Generator> npm list vite
npm ERR! code ELSPROBLEMS
npm ERR! invalid: vite@4.3.9 C:\Users\User\Desktop\LaravelTest\Report-Generator\node_modules\vite
Report-Generator@ C:\Users\User\Desktop\LaravelTest\Report-Generator
├─┬ @vitejs/plugin-react@2.2.0
│ └── vite@4.3.9 deduped invalid: "^3.0.0" from node_modules/@vitejs/plugin-react
├─┬ laravel-vite-plugin@0.7.8
│ ├─┬ vite-plugin-full-reload@1.0.5
│ │ └── vite@4.3.9 deduped invalid: "^3.0.0" from node_modules/@vitejs/plugin-react
│ └── vite@4.3.9 deduped invalid: "^3.0.0" from node_modules/@vitejs/plugin-react
└── vite@4.3.9 invalid: "^3.0.0" from node_modules/@vitejs/plugin-react


npm ERR! 本次运行的完整日志位于：C:\Users\User\AppData\Local\npm-cache\_logs\2023-07-28T07_34_14_603Z-debug-0.log

解决办法 #

方法1：升级@vitejs/plugin-react到兼容Vite4的版本 #

@vitejs/plugin-react 3.x及以上版本已支持Vite4，直接升级即可：

• 执行卸载命令：

npm uninstall @vitejs/plugin-react

• 安装最新兼容版本：

npm install @vitejs/plugin-react@latest --save-dev

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

如果不想升级插件，可将Vite降级到3.x系列（比如错误提示中的3.2.7）：

• 卸载当前Vite：

npm uninstall vite

• 安装3.x版本：

npm install vite@^3.0.0 --save-dev

方法3：强制跳过peer依赖检查（不推荐） #

若需快速绕过错误，可使用--legacy-peer-deps参数强制安装，但可能引发潜在兼容性问题：

npm install --legacy-peer-deps

修改后的package.json（以方法1为例）：

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "@vitejs/plugin-react": "^4.0.0",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "laravel-vite-plugin": "^0.7.5",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "sass": "^1.56.1",
        "vite": "^4.0.0"
    }
}

内容的提问来源于stack exchange，提问作者naqib junaidy