Problem with using .cjs in Electron mode during development and build

[mulder3062]

What happened?

I am developing an Electron app in a Quasar CLI environment and have encountered a problem, so I am summarizing it here. Because of a required dependency library, I changed the environment from ESM to CommonJS as shown below. A .quasar/dev-electron/electron-main.cjs file is created, but the Electron CLI always looks for the .quasar/dev-electron/electron-main.mjs file. What I expect is for the .quasar/dev-electron/electron-main.cjs file to be found and executed.

I am looking for a solution.

What did you expect to happen?

1. The electron-main.cjs file is created.
2. electron cli runs electron-main.cjs.

Reproduction URL

https://codesandbox.io/p/devbox/quasar-electron-l7ldfq

How to reproduce?

1. Modify quasar.config.ts to quasar.config.cjs.
2. Modify the following file contents:
   package.json:

{
  "type": "module" // before
  "type": "commonjs" // now
}

tsconfig.json:

{
  "module": "ESNext" // before
  "module": "CommonJS" // now
}

quasar.config.cjs:

{
  // before
  electron: {
    // extendElectronMainConf (esbuildConf) {},        
  }

  // now
  electron: {
    extendElectronMainConf (esbuildConf) {
      esbuildConf.format = 'cjs';
      esbuildConf.resolveExtensions = [ '.cjs', '.mjs', '.js', '.cts', '.mts', '.ts', '.json' ],
      esbuildConf.outfile = '.quasar/dev-electron/electron-main.cjs'
    },
  }
}

Flavour

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

Areas

Electron Mode

Platforms/Browsers

Electron

Quasar info output

$ npm run info

> [email protected] info
> quasar info


Operating System - Windows_NT(10.0.22631) - win32/x64
NodeJs - 22.2.0

Global packages
  NPM - 10.7.0
  yarn - Not installed
  pnpm - Not installed
  bun - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.16.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-beta.14 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.27 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.3.2
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 5.2.11 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.20.2 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - 5.3.3 -- TypeScript is a language for application scale JavaScript development
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - 30.0.8 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  @electron/packager - 18.3.2 -- Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI
  electron-builder - 24.13.3 -- A complete solution to package and build a ready for distribution Electron app for MacOS, Windows and Linux with “auto update” support out of the box
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - omen
  Ehternet - *.*.*.*
  vEthernet (WSL (Hyper-V firewall)) - *.*.*.*

Relevant log output

App • Using quasar.config.cjs in "cjs" format
 App • Using .env files: .env
 App •  WAIT  • Compiling of Electron Main with Esbuild in progress...
 App •  WAIT  • Compiling of Electron Preload (electron-preload) with Esbuild in progress...
 App •  DONE  • Electron Main compiled with success by Esbuild • 2040ms

 App •  DONE  • Electron Preload (electron-preload) compiled with success by Esbuild • 2036ms

 App • Running "C:\MyProject\node_modules\electron\cli.js --inspect=5858 C:\MyProject\.quasar\dev-electron\electron-main.mjs" in C:\MyProject

Debugger listening on ws://127.0.0.1:5858/03d6791c-7279-4750-bb8c-6c85606a9408
For help, see: https://nodejs.org/en/docs/inspector
[ESLint] Found 0 error and 0 warning

 App • Command "C:\MyProject\node_modules\electron\cli.js" failed with exit code: 1

 App • ⚠️  Electron process ended with error code: 1

Additional context

Since CodeSandbox is not a Windows OS, you only need to check the output log.

In particular the following message
`App • Running "/workspace/node_modules/electron/cli.js --inspect=5858 /workspace/.quasar/dev-electron/electron-main.mjs" in /workspace

[rstoenescu]

Hi,

Going further we will gradually faze out the CJS builds, as will Electron also. Unfortunately you cannot fully configure the CLI to build out in CJS format for Electron. Switching from esm to cjs and from cjs to esm is not something we can achieve seamlessly (the devs would even have to change parts of the electron-main file). It would be a complete mess, and what we want to achieve with the new CLI is future-proofing it without the hassle.

Sorry if this is the not the right answer that you are looking for.