Vue 3 + Quasar + Vite + i18n - problem with @intlify/vite-plugin-vue-i18n

[mayrarabelo]

Summary

I'm having trouble installing Storybook in a Vue 3 + Quasar + i18n project.

First, when running the command: npx storybook@latest init
The following error log appears:

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/vite
npm error peer vite@"^2.0.0" from @intlify/[email protected]
npm error node_modules/@intlify/vite-plugin-vue-i18n
npm error dev @intlify/vite-plugin-vue-i18n@"^3.3.1" from the root project
npm error vite@"^2.9.13" from @quasar/[email protected]
npm error node_modules/@quasar/app-vite
npm error dev @quasar/app-vite@"^1.9.0" from the root project
npm error 3 more (@quasar/vite-plugin, @vitejs/plugin-vue, vite-plugin-checker)
npm error
npm error Could not resolve dependency:
npm error dev @storybook/vue3-vite@"8.4.6" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/vite
npm error peer vite@"^4.0.0 || ^5.0.0 || ^6.0.0" from @storybook/[email protected]
npm error node_modules/@storybook/vue3-vite
npm error dev @storybook/vue3-vite@"8.4.6" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

So, first I try to resolve the Vite version using: npm install vite@^5.0.0 --save-dev
And then npm i @vitejs/plugin-vue, which returns the error:

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @intlify/[email protected]
npm error Found: [email protected]
npm error node_modules/vite
npm error peer vite@">=2.0.0" from [email protected]
npm error node_modules/vite-plugin-checker
npm error dev vite-plugin-checker@"^0.8.0" from the root project
npm error dev vite@"^5.0.0" from the root project
npm error 1 more (@vitejs/plugin-vue)
npm error
npm error Could not resolve dependency:
npm error peer vite@"^2.0.0" from @intlify/[email protected]
npm error node_modules/@intlify/vite-plugin-vue-i18n
npm error dev @intlify/vite-plugin-vue-i18n@"^3.3.1" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/vite
npm error peer vite@"^2.0.0" from @intlify/[email protected]
npm error node_modules/@intlify/vite-plugin-vue-i18n
npm error dev @intlify/vite-plugin-vue-i18n@"^3.3.1" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error

Does anyone know why this is happening?

Additional information

No response

Create a reproduction

No response

[mayrarabelo]

I found the answer in quasarframework/quasar#14077.
In the comment: quasarframework/quasar#14077 (comment)

Adding up on the temporary workaround, note that if you're using vue-i18n you'll need to remove @intlify/vite-plugin-vue-i18n and replace it with @intlify/unplugin-vue-i18n to have Vite 4 support