quasar icon indicating copy to clipboard operation
quasar copied to clipboard
verified publisher icon quasarframework

Electron fails to build with fresh project and pnpm

Open marty0678 opened this issue 2 years ago • 0 comments

What happened?

A fresh, unmodified Quasar project fails to build an Electron app with pnpm. Repeating the same steps with npm instead, everything works correctly and the app builds.

pnpm version 8.14.1 node version v20.10.0 Host OS: Windows 11 22631.3007

What did you expect to happen?

When running as dev, an Electron window opens as expected, and the template app is present. When building, it is successful.

Reproduction URL

https://stackblitz.com/fork/quasarframework

How to reproduce?

Steps:

  1. Create a fresh Quasar project using pnpm - pnpm create quasar
  2. Follow all defaults that Quasar CLI gives you, make no alterations.
  3. Run quasar dev -m electron - Verify it is successful.
  4. Run quasar build -m electron (ensure you are running as an admin on Windows, otherwise you will get a different error about permissions).

Flavour

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

Areas

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

Platforms/Browsers

Electron

Quasar info output

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

Global packages
  NPM - 10.2.3
  yarn - 1.22.21
  @quasar/cli - 2.3.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.14.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.7.1 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.8 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - Not installed
  vuex - Not installed
  vite - 2.9.16 -- Native-ESM powered web dev build tool
  eslint - 8.56.0 -- An AST-based pattern checker for JavaScript.
  electron - 28.1.3 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - 17.1.2 -- Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI
  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 - {REDACTED}
  Ethernet 3 - {REDACTED}
  vEthernet (WSL (Hyper-V firewall)) - 172.31.208.1

Relevant log output

PS C:\Users\marty\...\Quasar Test> quasar build -m electron

 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b


 Build mode............. electron
 Pkg quasar............. v2.14.2
 Pkg @quasar/app-vite... v1.7.1
 Pkg vite............... v2.9.16
 Debugging.............. no
 Publishing............. no

 App •  WAIT  • Compiling of Electron UI with Vite in progress...
 App •  DONE  • Electron UI compiled with success • 3183ms

 App •  WAIT  • Compiling of Electron Main with Esbuild in progress...
 App •  DONE  • Electron Main compiled with success • 12ms

 App •  WAIT  • Compiling of Electron Preload with Esbuild in progress...
 App •  DONE  • Electron Preload compiled with success • 8ms

 UI files build summary:
 ╔══════════════════════════════════╤═══════════╗
 ║                            Asset │      Size ║
 ╟──────────────────────────────────┼───────────╢
 ║                 electron-main.js │   1.05 KB ║
 ║              electron-preload.js │   0.00 KB ║
 ║ assets/ErrorNotFound.3a3d8ac4.js │   0.59 KB ║
 ║         assets/index.6b1056b1.js │ 100.87 KB ║
 ║     assets/IndexPage.1d1e480e.js │   1.21 KB ║
 ║    assets/MainLayout.87ee2c7d.js │  33.22 KB ║
 ║        assets/render.612f2421.js │   0.38 KB ║
 ╟──────────────────────────────────┼───────────╢
 ║        assets/index.07d79b61.css │ 197.21 KB ║
 ╟──────────────────────────────────┼───────────╢
 ║                     package.json │   0.36 KB ║
 ╟──────────────────────────────────┼───────────╢
 ║                       index.html │   0.83 KB ║
 ╚══════════════════════════════════╧═══════════╝

 App • Installing UnPackaged folder production dependencies...
 App • [sync] Running "pnpm install --prod" in C:\Users\marty\...\Quasar Test\dist\electron\UnPackaged

 WARN  Unsupported engine: wanted: {"node":"^18 || ^16 || ^14.19"} (current: {"node":"v20.10.0","pnpm":"8.14.1"})
Packages: +27
+++++++++++++++++++++++++++
Progress: resolved 27, reused 27, downloaded 0, added 27, done

dependencies:
+ quasar 2.14.2
+ vue 3.4.8
+ vue-router 4.2.5

devDependencies: skipped because NODE_ENV is set to production

Done in 2s
 App •  WAIT  • Bundling app with electron-packager...
Packaging app for platform win32 x64 using electron v28.1.3

 App • ⚠️   electron-packager could not build

Error: C:\Users\marty\AppData\Local\Temp\electron-packager\win32-x64\Quasar App-win32-x64-WIUEwp\resources\app\node_modules\@babel\parser: file "..\..\..\..\..\..\..\..\...\Quasar Test\dist\electron\UnPackaged\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser" links out of the package

node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "undefined".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v20.10.0

Additional context

As mentioned, following the same steps with npm works correctly, along with yarn. I haven't tested bun, but this issue is specific to pnpm + building electron. Building an SPA is fine with pnpm as well for reference. When not running as admin, you get a slightly different error about permissions, but running the command under an admin terminal you get the above error instead, which is why I'm focusing on here.

I cheated on the repo link above as obviously, electron failed to build in the online environment. I can create a github repo but there is nothing unique about my steps / it would be faster to just set it up from scratch using the four steps above haha. But I can if required.

Let me know if you need any additional information, thank you for your time and this awesome project!

Edit: Updated error message, I copied the permission error one by mistake at first (when you don't run the build command as an admin). I believe this is the same error in the comments of this ticket here - https://github.com/quasarframework/quasar/issues/14436 but that ticket was opened for a monorepo issue instead.

marty0678 avatar Jan 10 '24 22:01 marty0678