quasar ext add @quasar/testing-unit-vitest fails to install for TypeScript using npm

[Abathreixo]

Software version:

OS: Debian 12
Node: v20.16.0
NPM: 10.8.3
Any other software related to your bug: No

What did you get as the error?

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: vitest@2.1.1
npm error Found: @types/node@12.20.55
npm error node_modules/@types/node
npm error @types/node@"" from @types/body-parser@1.19.5
npm error node_modules/@types/body-parser
npm error @types/body-parser@"" from @types/express@4.17.21
npm error node_modules/@types/express
npm error @types/express@"^4.17.13" from @quasar/app-vite@1.9.5
npm error node_modules/@quasar/app-vite
npm error dev @quasar/app-vite@"^1.9.0" from the root project
npm error 1 more (@types/compression)
npm error @types/node@"" from @types/connect@3.4.38
npm error node_modules/@types/connect
npm error @types/connect@"" from @types/body-parser@1.19.5
npm error node_modules/@types/body-parser
npm error @types/body-parser@"" from @types/express@4.17.21
npm error node_modules/@types/express
npm error @types/express@"^4.17.13" from @quasar/app-vite@1.9.5
npm error node_modules/@quasar/app-vite
npm error 1 more (@types/compression)
npm error 4 more (@types/express-serve-static-core, @types/send, ...)
npm error
npm error Could not resolve dependency:
npm error peerOptional @types/node@"^18.0.0 || >=20.0.0" from vitest@2.1.1
npm error node_modules/vitest
npm error peer vitest@"^1.1.0 || ^2.0.0" from @quasar/quasar-app-extension-testing-unit-vitest@1.1.0
npm error node_modules/@quasar/quasar-app-extension-testing-unit-vitest
npm error dev @quasar/quasar-app-extension-testing-unit-vitest@"" from the root project
npm error
npm error Conflicting peer dependency: @types/node@22.5.5
npm error node_modules/@types/node
npm error peerOptional @types/node@"^18.0.0 || >=20.0.0" from vitest@2.1.1
npm error node_modules/vitest
npm error peer vitest@"^1.1.0 || ^2.0.0" from @quasar/quasar-app-extension-testing-unit-vitest@1.1.0
npm error node_modules/@quasar/quasar-app-extension-testing-unit-vitest
npm error dev @quasar/quasar-app-extension-testing-unit-vitest@"*" 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
npm error
npm error For a full report see:
npm error /home/user/.npm/_logs/2024-09-14T16_07_45_245Z-eresolve-report.txt
npm error A complete log of this run can be found in: /home/user/.npm/_logs/2024-09-14T16_07_45_245Z-debug-0.log

App • ⚠️ Command "npm" failed with exit code: 1

App • ⚠️ FAIL Failed to install @quasar/quasar-app-extension-testing-unit-vitest

What were you expecting?

The quasar extension to install

What steps did you take, to get the error?

1. npm create quasar
2. Choose TypeScript (use the default values for the rest)
3. cd quasar-project
4. quasar ext add @quasar/testing-unit-vitest

Additional note: if using pnpm (version 9.9.0), the installation will be successful, but then the command: "quasar dev" loads the default page and then proceeds to throw errors.

[IlCallo]

There are 2 problems here
The first one is that @quasar/app-vite installs an old version of @types/node, and we can easily fix it

The second one is that Vitest 2 requires Vite 5 and I kind of missed that requirement when I added Vitest 2 support
As a first side effect, some typings aren't compatible and generate TS errors in vitest.config.ts
The solution for this is a bit tricky, we need to detect which version of @quasar/app-vite or vite is currently used and install Vitest 1 or Vitest 2 depending on the available one

Thanks for reporting, I hope I'll be able to fix this next week

[pbratkowski]

The second one is that Vitest 2 requires Vite 5 and I kind of missed that requirement when I added Vitest 2 support As a first side effect, some typings aren't compatible and generate TS errors in vitest.config.ts The solution for this is a bit tricky, we need to detect which version of @quasar/app-vite or vite is currently used and install Vitest 1 or Vitest 2 depending on the available one

I can confirm this also affects vite with yarn. If you have docker compose, you can simply clone and run the following repo, or see the README for steps to reproduce, should you need to. https://github.com/pbratkowski/qvt

[IlCallo]

So, this was actually caused by Quasar, Vite and Vitest releasing new stable major versions all around the same time

When we released Vitest AE v1, we dropped support for Vite <5 and for Vitest <1, because Vitest 1 requires Vite 5
We also added support for the new Quasar app-vite v2, which was then in beta phase

When we released Vitest AE v1.1, we added Vitest 2 support, which still requires Vite 5

In the meantime, Vite 6 was released
In the meantime, right before Quasar app-vite v2 was promoted to stable, it switched to using Vite 6 instead of Vite 5
In the meantime, Vitest was working on Vitest 2.2, which would have supported Vite 6, but dropped that release in favor of a new major release, thus Vitest 3 was released (latest Vitest 2.x version was 2.1.9, which fixes this CVE)

And that's how we got to this point:

• Quasar app-vite v1 only requires Vite 5, via a workaround, and thus can use Vitest 1 and 2
• Quasar app-vite v2 beta required Vite 5, and worked with Vitest 1 and 2
• Quasar app-vite v2 stable requires Vite 6, but at the time of its release there was only Vitest 2 which required Vite 5, thus causing TS type conflicts
• Vitest 3 supports both Vite 5 and Vite 6, thus using it should be safe both for Quasar app-vite v1 and v2 projects

So the actual solution for this problem was just to support and scaffold Vitest 3 for all kind of projects