Out of the box Electron with Quasar Vite not working, @electron/remote module not found in preload.ts

What happened?

Out of the box creation of brand new Quasar project with electron mode added resulting in @electron/remote module not found in electron-preload.ts, using Yarn. I’ve made just one minor modification to what comes out of the box and tried running the default app in Electron mode.

What did you expect to happen?

For the remote module to be found, its there in node_modules

Reproduction URL

https://codepen.io/

How to reproduce?

1. Sorry, since its Electron out of the box there’s no point in sharing online as it can’t be run
2. Create new quasar project with yarn create quasar
3. Select Vite
4. SCSS
5. Pinia
6. quasar mode add electron
7. yarn add @electron/remote
8. Change preload script to `import { BrowserWindow} from ‘@electron/remote’
9. Run quasar dev -m electron with devtools open
10. See console error for unable to load module @electron/remote

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app), Electron Mode

Platforms/Browsers

Electron

Quasar info output

Operating System - Linux(5.19.10-xanmod1) - linux/x64
NodeJs - 16.16.0

Global packages
  NPM - 8.11.0
  yarn - 1.22.15
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.8.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.1.2 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.15.3 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.39 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.5
  pinia - 2.0.22 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.15 -- Native-ESM powered web dev build tool
  eslint - 8.24.0 -- An AST-based pattern checker for JavaScript.
  electron - 20.2.0 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - pop-os
  wlp2s0 - 192.168.1.177

Relevant log output

Unable to load preload script: /home/davidparr/src/myquasarapp/.quasar/electron/electron-preload.js

Error: module not found: @electron/remote
    at preloadRequire (VM4 sandbox_bundle:93:1386)
    at <anonymous>:6:21
    at runPreloadScript (VM4 sandbox_bundle:93:2213)
    at Object.<anonymous> (VM4 sandbox_bundle:93:2480)
    at ./lib/sandboxed_renderer/init.ts (VM4 sandbox_bundle:93:2636)
    at __webpack_require__ (VM4 sandbox_bundle:1:170)
    at VM4 sandbox_bundle:1:1242
    at ___electron_webpack_init__ (VM4 sandbox_bundle:1:1320)
    at VM4 sandbox_bundle:160:455

Additional context

No response

[pdanpdan]

I’ll leave this open, I think we need at least a comment in the base template about this

[pdanpdan]

Np, I discover the same way in an upgrade from 19 to 20 😃