Can you provide a boilerplate for using Electron in Quasar Framework?

[Shinelazy2]

You installed the necessary packages with the following command:

npm i -D wdio-electron-service

And you also installed Electron in the Quasar Framework using the following commands:

npm init quasar
...
npx quasar dev -m electron

However, you encountered a problem during the installation process with the following error message:

**npx run ./wdio.conf.js**
? A project named "quasar-project" was detected at "C:\Users\shine\OneDrive\문서\workspace\node\mocha\quasar-project", correct? Yes
? What type of testing would you like to do? Desktop Testing - of Electron Applications
    > https://webdriver.io/docs/desktop-testing/electron
? What is the path to your compiled Electron app? .quasar
? Which framework do you want to use? Mocha (https://mochajs.org/)
? Do you want to use a compiler? TypeScript (https://www.typescriptlang.org/)
? Do you want WebdriverIO to autogenerate some test files? Yes
? Where should these files be located? C:\Users\shine\OneDrive\문서\workspace\node\mocha\quasar-project\test\specs\**\*.ts
? Which reporter do you want to use? spec
? Do you want to add a plugin to your test setup? wait-for
? Do you want to add a service to your test setup? electron
? Do you want me to run `npm install` Yes

Setting up TypeScript...
✔ Success!

Installing wdio packages:
- @wdio/local-runner@latest
- @wdio/mocha-framework@latest
- @wdio/spec-reporter@latest
- wdio-wait-for
- wdio-electron-service
- ts-node
- typescript

added 58 packages, and audited 774 packages in 8s

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

found 0 vulnerabilities
✔ Success!

Creating a WebdriverIO config file...
✔ Success!

Autogenerating test files...
✔ Success!

Adding "wdio" script to package.json.
✔ Success!


To run your tests, execute:
$ cd C:\Users\shine\OneDrive\문서\workspace\node\mocha\quasar-project
$ npm run wdio

Adding scripts to package.json
node:internal/modules/cjs/loader:985
  const err = new Error(message);
              ^

Error: Cannot find module 'C:\Users\shine\OneDrive\문서\workspace\node\mocha\quasar-project\run\package.json'
Require stack:
- C:\Users\shine\AppData\Local\npm-cache\_npx\471611576716610c\node_modules\wdio\build\index.js
- C:\Users\shine\AppData\Local\npm-cache\_npx\471611576716610c\node_modules\wdio\bin\wdio.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:985:15)
    at Function.Module._load (node:internal/modules/cjs/loader:833:27)
    at Module.require (node:internal/modules/cjs/loader:1057:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at createWebdriverIO (C:\Users\shine\AppData\Local\npm-cache\_npx\471611576716610c\node_modules\wdio\build\index.js:81:21) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\shine\\AppData\\Local\\npm-cache\\_npx\\471611576716610c\\node_modules\\wdio\\build\\index.js',
    'C:\\Users\\shine\\AppData\\Local\\npm-cache\\_npx\\471611576716610c\\node_modules\\wdio\\bin\\wdio.js'
  ]
}

[Shinelazy2]

How to execute:

Comment out wdio.conf.ts:

// tsNodeOpts: {
// project: './test/tsconfig.json',
// transpileOnly: true
// }

Add type to package.json:

"type": "module"

Error during Quasar build:

C:\Users\shine\OneDrive\Documents\workspace\node\mocha\quasar-project\wdio.conf.ts:1
import { readFileSync } from 'fs';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:360:18)
at wrapSafe (node:internal/modules/cjs/loader:1084:15)
at Module._compile (node:internal/modules/cjs/loader:1119:27)
at Module.m._compile (C:\Users\shine\OneDrive\Documents\workspace\node\mocha\quasar-project\node_modules\ts-node\src\index.ts:1618:23)
at Module.m._compile (C:\Users\shine\OneDrive\Documents\workspace\node\mocha\quasar-project\node_modules\ts-node\src\index.ts:1618:23)
at Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
at require.extensions.<computed> (C:\Users\shine\OneDrive\Documents\workspace\node\mocha\quasar-project\node_modules\ts-node\src\index.ts:1621:12)
at Object.require.extensions.<computed> [as .ts] (C:\Users\shine\OneDrive\Documents\workspace\node\mocha\quasar-project\node_modules\ts-node\src\index.ts:1621:12)
at Module.load (node:internal/modules/cjs/loader:1033:32)
at Function.Module._load (node:internal/modules/cjs/loader:868:12)

PS) Is there no other way to test without building? Is it impossible in development mode?

[goosewobbler]

The error above is definitely some kind of ESM / CJS misconfiguration. As for testing without building - no, your electron app needs to be built before you can test it using WDIO and this service.

[goosewobbler]

I've not used Quasar before, but this doesn't seem to be an issue specific to the Electron service, rather an ESM issue / query around using Quasar with WDIO - you will likely get more help over in the WDIO forum