Compilation error when using Quasar v2 with Cypress

[paganaye]

What happened?

I am on a vanilla app using only the command line in an empty directly and getting an error, in a source in a build folder.

(base) pascal@pascal-MS-7B79:~/code/pascal/forms2$ npm init quasar
(base) pascal@pascal-MS-7B79:~/code/pascal/forms2$ quasar ext add @quasar/testing
(base) pascal@pascal-MS-7B79:~/code/pascal/forms2$ npm run dev

I am getting an error ReferenceError: Cypress is not defined

Here is the full log:

--------------------------------------------------------------------------------------------------
(base) pascal@pascal-MS-7B79:~/code/pascal/forms2$ quasar --version
--------------------------------------------------------------------------------------------------
@quasar/cli v2.2.3
--------------------------------------------------------------------------------------------------
(base) pascal@pascal-MS-7B79:~/code/pascal/forms2$ npm init quasar
--------------------------------------------------------------------------------------------------

 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b

✔ What would you like to build? › App with Quasar CLI, let's go!
✔ Project folder: … .
✔ Pick Quasar version: › Quasar v2 (Vue 3 | latest and greatest)
✔ Pick script type: › Typescript
✔ Pick Quasar App CLI variant: › Quasar App CLI with Vite
✔ Package name: … formulaire-bleu
✔ Project product name: (must start with letter if building mobile apps) … Formulaire Bleu
✔ Project description: … no description
✔ Author: … Pascal Ganaye
✔ Pick a Vue component style: › Composition API with <script setup>
✔ Pick your CSS preprocessor: › Sass with SCSS syntax
✔ Check the features needed for your project: › ESLint, State Management (Pinia), Axios
✔ Pick an ESLint preset: › Prettier

 Quasar • Generating files...

 - README.md
 - .editorconfig
 - .gitignore
 - .npmrc
 - package.json
 - tsconfig.json
 - index.html
 - postcss.config.cjs
 - quasar.config.js
 - .vscode/extensions.json
 - .vscode/settings.json
 - public/favicon.ico
 - src/App.vue
 - src/env.d.ts
 - src/quasar.d.ts
 - src/shims-vue.d.ts
 - public/icons/favicon-128x128.png
 - public/icons/favicon-16x16.png
 - public/icons/favicon-32x32.png
 - public/icons/favicon-96x96.png
 - src/assets/quasar-logo-vertical.svg
 - src/boot/.gitkeep
 - src/components/EssentialLink.vue
 - src/components/ExampleComponent.vue
 - src/components/models.ts
 - src/layouts/MainLayout.vue
 - src/pages/ErrorNotFound.vue
 - src/pages/IndexPage.vue
 - src/router/index.ts
 - src/router/routes.ts
 - src/css/app.scss
 - src/css/quasar.variables.scss
 - src/boot/axios.ts
 - .eslintignore
 - .eslintrc.cjs
 - .prettierrc
 - src/stores/example-store.ts
 - src/stores/index.ts
 - src/stores/store-flag.d.ts

 Quasar •  SUCCESS  • The project has been scaffolded

✔ Install project dependencies? (recommended) › Yes, use npm

added 420 packages, and audited 421 packages in 17s

85 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> formulaire-bleu@0.0.1 lint
> eslint --ext .js,.ts,.vue ./ --fix

To get started:

  cd .
  quasar dev # or: yarn quasar dev # or: npx quasar dev

Documentation can be found at: https://v2.quasar.dev

Quasar is relying on donations to evolve. We'd be very grateful if you can
read our manifest on "Why donations are important": https://v2.quasar.dev/why-donate
Donation campaign: https://donate.quasar.dev
Any amount is very welcome.
If invoices are required, please first contact Razvan Stoenescu.

Please give us a star on Github if you appreciate our work:
  https://github.com/quasarframework/quasar

Enjoy! - Quasar Team

--------------------------------------------------------------------------------------------------
(base) pascal@pascal-MS-7B79:~/code/pascal/forms2$ npm run dev
--------------------------------------------------------------------------------------------------

> formulaire-bleu@0.0.1 dev
> quasar dev

 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b

 » Reported at............ 9/11/2023 12:00:57 PM
 » App dir................ /home/pascal/code/pascal/forms2
 » App URL................ http://localhost:9000/
                           http://192.168.1.155:9000/
 » Dev mode............... spa
 » Pkg quasar............. v2.12.6
 » Pkg @quasar/app-vite... v1.5.1
 » Browser target......... es2019|edge88|firefox78|chrome87|safari13.1

 App • Opening default browser at http://localhost:9000/

^C
--------------------------------------------------------------------------------------------------
(base) pascal@pascal-MS-7B79:~/code/pascal/forms2$ quasar ext add @quasar/testing
--------------------------------------------------------------------------------------------------
 App • Installing "@quasar/testing" Quasar App Extension

 App • Installing @quasar/quasar-app-extension-testing...
 App • [sync] Running "npm install --save-dev @quasar/quasar-app-extension-testing" in /home/pascal/code/pascal/forms2

added 8 packages, and audited 429 packages in 2s

88 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
? Please choose which testing harnesses to install (only Qv2-compatible 
harnesses are shown): Cypress 12 e2e and component testing

 App • Updating /quasar.extensions.json for "@quasar/testing" extension ...
 App • Running App Extension install script...
 App • Installing "@quasar/testing-e2e-cypress" Quasar App Extension

 App • Installing @quasar/quasar-app-extension-testing-e2e-cypress...
 App • [sync] Running "npm install --save-dev @quasar/quasar-app-extension-testing-e2e-cypress" in /home/pascal/code/pascal/forms2

added 409 packages, and audited 838 packages in 12s

120 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
? Cypress e2e and component Test Harness will now be installed. Please choose 
additional options: extra "scripts" in your package.json, enable TypeScript 
support

 App • Updating /quasar.extensions.json for "@quasar/testing-e2e-cypress" extension ...
 App • Running App Extension install script...
 App • Installing dependencies...
 App • [sync] Running "npm install" in /home/pascal/code/pascal/forms2

added 1 package, and audited 839 packages in 2s

120 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
 App • Quasar App Extension "@quasar/testing-e2e-cypress" successfully installed.

 App • Quasar App Extension "@quasar/testing" successfully installed.

--------------------------------------------------------------------------------------------------
(base) pascal@pascal-MS-7B79:~/code/pascal/forms2$ npm run dev
--------------------------------------------------------------------------------------------------

> formulaire-bleu@0.0.1 dev
> quasar dev

 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b

 App • Running "@quasar/testing" Quasar App Extension...
/home/pascal/code/pascal/forms2/node_modules/cypress/vue/dist/cypress-vue.cjs.js:88
    if (Cypress.testingType !== 'component') {
    ^

ReferenceError: Cypress is not defined
    at setupHooks (/home/pascal/code/pascal/forms2/node_modules/cypress/vue/dist/cypress-vue.cjs.js:88:5)
    at Object.<anonymous> (/home/pascal/code/pascal/forms2/node_modules/cypress/vue/dist/cypress-vue.cjs.js:8578:1)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/home/pascal/code/pascal/forms2/node_modules/@quasar/quasar-app-extension-testing-e2e-cypress/dist/install-quasar-plugin.js:4:15)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)

Node.js v18.16.0

What did you expect to happen?

I'd expect the app to start

Reproduction URL

https://stackblitz.com/edit/quasarframework-cvrm7l?file=package.json

How to reproduce?

I haven't been able to reproduce this part on stackblitz

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

App Extension API

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[FelipeVeiga]

same here

[rstoenescu]

Fixed it and new versions of q/testing AE will be released tomorrow