Incorrect Electron preload script compiled

[seiberspace]

What happened?

When running quasar dev -m electron and having some import statement in the preload script at src-electron/electron-preload.js, the electron console shows an error about the preload script .quasar/electron/electron-preload.js. The error can vary depending on the import statement.

Reason is a mutilated require statement for each import:

/***/ "electron":
/*!***************************!*\
  !*** external "electron" ***!
  \***************************/
/***/ ((module) => {

module.exports = electron;

where the last line should be:

module.exports = require("electron");

This leads to a ReferenceError for normal packages, and a syntax error for scoped packages.

What did you expect to happen?

No error is shown, the file is required.

Reproduction URL

https://stackblitz.com/edit/quasarframework-webpack-pfqfgw?file=src-electron%2Felectron-preload.js

How to reproduce?

Not sure if the reproduction link makes any sense for an electron app, anyway:

1. Add a line to the electron preload script (which is otherwise empty) import { contextBridge } from 'electron';
2. Run quasar dev -m electron
3. Observe the browser console. There will be an error.
4. Open the script at .quasar/electron/electron-preload.js. There will be the mutilated require statement.

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Electron Mode

Platforms/Browsers

Electron

Quasar info output

Operating System - Windows_NT(10.0.19045) - win32/x64
NodeJs - 16.15.1

Global packages
  NPM - 8.13.1
  yarn - 1.22.19
  @quasar/cli - 2.3.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.13.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.11.3 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.16.8 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.3.8 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - Not installed
  vuex - Not installed
  electron - 27.0.4 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.23.3 -- Babel compiler core.
  webpack - 5.89.0 -- Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.11.1 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.9.4 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  - removed -

Relevant log output

No response

Additional context

No response

[rstoenescu]

Hi,

I have run Quasar in your project folder. I get no errors since the line you indicated gets compiled correctly:

Upon a deep inspection, it seems that when NPM is used as a package manager, it messes up the dependencies and badly influences the compilation.

Can you try using Yarn v1 instead, please? (it's what I am using and it works correctly) Until I can figure out what NPM does wrong. Thanks.

[seiberspace]

Hi Razvan,

Thank you for your reply, that's interesting... I can't be sure (yet) if all my globally installed packages are in order, I'm not really taking care of my Windows installation. So if you say it works for you, let's assume the problem is on my side. I will still have a look, maybe reinstall all global packages.

However, I meanwhile switched for this project to vite, took it as a nudge to finally do that. And that works as a charm!

So if you agree that the problem is likely related to my installation, then I'm fine if we close this issue.

Thanks and keep up the great work - If you need a testimonial, here is mine: Quasar is the first framework I ever used that gave me both working out-of-the-box components and the flexibility to create my own without hassle. Since many years my UI-framework of choice.

Cheers, Arne

[navishachiku]

Same problem here

Error

.quasar/electron/electron-preload.js

/***/ "electron":
/*!***************************!*\
  !*** external "electron" ***!
  \***************************/
/***/ ((module) => {

"use strict";
module.exports = require("electron");

/***/ }),

/***/ "@electron/remote":
/*!***********************************!*\
  !*** external "@electron/remote" ***!
  \***********************************/
/***/ ((module) => {

"use strict";
module.exports = @electron/remote;

/***/ })

/******/    });
/************************************************************************/
/******/    // The module cache
...

quasar info:

Important local packages
  quasar - 2.14.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.12.1 -- Quasar Framework App CLI with Webpack

Very similar to this question: https://github.com/quasarframework/quasar/issues/16497

But this time is

module.exports = @electron/remote;

And unfortunately for my project the v3.12.1 fix still doesn't solve the problem.

So I started to follow v3.11.1 and compare the commits of later versions and found that The following change is what caused the error for my project https://github.com/quasarframework/quasar/commit/b4ce74000eecddd28cbaef956181ab5437e478be

Now I use the latest version from current npm (v3.12.1), Then add .libraryTarget('commonjs2') back and my project will work normally.

hope developers can help eradicate this problem.

[rstoenescu]

Should be fixed with the new CLIs (release major new versions today). Please take a look and comment if this still doesn't works.

https://github.com/quasarframework/quasar/discussions/16877