Cannot upgrade to Vite 5: Conflicting peer dependency vite@5.1.0

HendrikJan commented 9 months ago

Related plugins

[x] plugin-vue
[ ] plugin-vue-jsx

Describe the bug

I run npx ncu -u and some packages are upgraded:

 @vitejs/plugin-vue   ^4.5.2  →   ^5.0.2
 laravel-vite-plugin  ^0.8.1  →   ^1.0.1
 vite                 ^4.5.1  →  ^5.0.10
 vite-plugin-vuetify  ^1.0.2  →   ^2.0.1

Then I run npm install and I get this error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: @vitejs/plugin-vue@4.5.2
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   @vitejs/plugin-vue@"^5.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! @vitejs/plugin-vue@"^5.0.2" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: vite@5.0.10
npm ERR! node_modules/vite
npm ERR!   peer vite@"^5.0.0" from @vitejs/plugin-vue@5.0.2
npm ERR!   node_modules/@vitejs/plugin-vue
npm ERR!     @vitejs/plugin-vue@"^5.0.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR!

What I expect is an upgrade to Vite 5 with no errors

Reproduction

https://stackblitz.com/edit/vitejs-vite-i9kve7?file=package.json

Steps to reproduce

Run npx ncu -u followed by npm install

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.10.5 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-vue: ^4.5.2 => 4.6.2 
    vite: ^4.5.1 => 4.5.1

Used Package Manager

npm

Logs

devDependencies and dependencies before running npx ncu -u are these:

{
  "devDependencies": {
    "@mdi/font": "^7.4.47",
    "@playwright/test": "^1.40.1",
    "@types/node": "^20.10.6",
    "@typescript-eslint/eslint-plugin": "^6.17.0",
    "@typescript-eslint/parser": "^6.17.0",
    "@vue-macros/volar": "^0.18.8",
    "autoprefixer": "^10.4.16",
    "axios": "^1.6.3",
    "chrono-node": "^2.7.4",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-json": "^3.1.0",
    "eslint-plugin-markdown": "^3.0.1",
    "eslint-plugin-vue": "^9.19.2",
    "laravel-vite-plugin": "^0.8.1",
    "lodash": "^4.17.21",
    "mariadb": "^3.2.3",
    "material-design-icons-iconfont": "^6.7.0",
    "npm-check-updates": "^16.14.12",
    "postcss": "^8.4.32",
    "postcss-cli": "^11.0.0",
    "postcss-import": "^16.0.0",
    "prettier": "^3.1.1",
    "sass": "^1.69.7",
    "typescript": "^5.3.3",
    "unplugin-vue-define-options": "^1.4.1",
    "vite": "^4.5.1",
    "vue-eslint-parser": "^9.3.2"
  },
  "dependencies": {
    "@inertiajs/vue3": "^1.0.14",
    "@mdi/svg": "^7.4.47",
    "@vitejs/plugin-vue": "^4.5.2",
    "@vueuse/components": "^10.7.1",
    "@vueuse/core": "^10.7.1",
    "alpinejs": "^3.13.3",
    "cli": "^1.0.1",
    "date-fns": "^3.0.6",
    "dotenv": "^16.3.1",
    "flowbite": "^2.2.1",
    "highlight.js": "^11.9.0",
    "vite-plugin-vuetify": "^1.0.2",
    "vue-i18n": "^9.8.0",
    "vuetify": "^3.4.9"
  }
}

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

veodko commented 9 months ago

I have the same problem, newest package versions conflict with each other -.-

any fix for this?

HendrikJan commented 8 months ago

I tried to install newest packages again today. The problem is still there. The error is now:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: @vitejs/plugin-vue@4.6.2
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   @vitejs/plugin-vue@"^5.0.3" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! @vitejs/plugin-vue@"^5.0.3" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: vite@5.1.0
npm ERR! node_modules/vite
npm ERR!   peer vite@"^5.0.0" from @vitejs/plugin-vue@5.0.3
npm ERR!   node_modules/@vitejs/plugin-vue
npm ERR!     @vitejs/plugin-vue@"^5.0.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/haaiee/.npm/eresolve-report.txt for a full report.

sapphi-red commented 8 months ago

This is a bug in npm (https://github.com/npm/cli/issues/3782). Using --force would work for now.

srguiwiz2 commented 7 months ago

Less scary than a blanket --force I was able to get around this blocker by running two separate commands

npm install vite
npm install

This was inspired by reading above mentioned npm bug. Thank you.

JustinLawrenceMS commented 7 months ago

The solutions above didn't work for me (probably because I don't know frontend as well as I'd like).

I've been doing npm install --legacy-peer-deps

EdgarsFrontEnd commented 7 months ago

vitejs/plugin-vue and vite should have matching versions, otherwise use npm install --legacy-peer-deps

vitejs / vite-plugin-vue