Failed to fetch dynamically imported module

damms005 commented 1 year ago

Software version

OS: Linux Node: v18.9.0 NPM: v8.19.1

What did you get as the error?

> Failed to fetch dynamically imported module: http://localhost:9000/__cypress/src/test/cypress/support/component.ts

What were you expecting?

The default Cypress test for the default/installed QuasarButton.cy.ts should run without errors.

What steps did you take, to get the error?

Ran npm run test:component on a fresh Quasar app with Cypress AE/test harness installed

IlCallo commented 1 year ago

Please provide:

Cypress version
Cypress AE version
Quasar version
Webpack/Vite version
the exact steps you followed
a repro

I just tried to generate a new Quasar project and add the Cypress AE v4 beta, everything running fine here

damms005 commented 1 year ago

Cypress version: tested with both Cypress 10 and 11. Both failed
Cypress AE version: Not sure what you meant by this. I ran quasar ext add @quasar/testing in a fresh Quasar app
Quasar version: v2
Vite version: Not sure. Again, it is whatever was installed when I ran quasar ext add @quasar/testing on a fresh project
The exact steps you followed: Screen recording here: https://files.fm/f/pn6gwtmhf
A repro: I've got nothing. I however have a screen recording. I hope it is helpful: https://files.fm/f/pn6gwtmhf

Note that the screencast uses Yarn. It is reproducible with Yarn/NPM.

PS. Dependencies in package.json:

  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "pinia": "^2.0.11",
    "quasar": "^2.6.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0"
  },
  "devDependencies": {
    "@quasar/app-vite": "^1.0.0",
    "@quasar/quasar-app-extension-testing": "^2.0.5",
    "@quasar/quasar-app-extension-testing-e2e-cypress": "^5.0.0-beta.7",
    "@types/node": "^12.20.21",
    "@typescript-eslint/eslint-plugin": "^5.10.0",
    "@typescript-eslint/parser": "^5.10.0",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^9.0.0",
    "prettier": "^2.5.1",
    "typescript": "^4.5.4",
    "cypress": "^10.10.0",
    "eslint-plugin-cypress": "^2.12.1"
  }

IlCallo commented 1 year ago

It's due to you not selecting SCSS preprocessor when creating the Quasar project I'll update

import 'quasar/src/css/index.sass';

to

import 'quasar/dist/quasar.prod.css';

but you'll need to manually update import 'src/css/app.scss'; to import 'src/css/app.css';, as mentioned in the comment right before it

IlCallo commented 1 year ago

Thinking again about this, using import 'quasar/dist/quasar.prod.css'; would prevent user-defined SCSS variables to be picked up, so I'll leave it as is

I'll add a couple comments there suggesting how to use it without a preprocessor

damms005 commented 1 year ago

In this instance where I have the Quasar app already setup without a CSS preprocessor, how can I now later add a CSS preprocessor, for example, something like postcss?

IlCallo commented 1 year ago

I guess you only need to add an app.scss file into src/css folder and then change the css property into quasar.config.js to reference it. Then you'll need to add a .postcssrc.js file with the content that Quasar provides by default

All-in-all, you probably will have a better DX just by generating a new project with different creation options and copying over your files

quasarframework / quasar-testing