Old source version used in app.asar within pnpm, npm and yarn workspace projects

[falkfrentzen]

Hello everyone,

first of all thanks for developing this easy-to-use project!

I came across this peculiar problem:
electron-builder uses an old code source for the app.asar assets, when the following conditions are met:

• the app package is in a monorepo; I tested it in different monorepos:
  1. Turborepo based on pnpm workspace,
  2. pnpm workspace
  3. yarn workspace
  4. npm workspace
• and the monorepo project is open in any editor (tried it with VSCode, Cursor and Atom)

I use electron-vite for scaffolding the app package and building the source into a directory called "out" in the app package's root. When starting the editor, opening the project and running the electron-builder --"target" (e.g. electron-builder --mac) command (tested mac and windows nsis) the source from out is correctly copied into the app.asar, but subsequent calls of the command result in the source from the first run being bundled to app.asar. Only after relaunching the editor does the electron-builder --"target" command work for the first try.

This is a recreation of an npm monorepo with an app package, that uses electron-builder for building the app: https://codesandbox.io/p/devbox/xq7hs8
Installing the packages seems to not work in the sandbox due to electron-builder failing, but forking it to the local environment should work.

This is the electron-builder config yml used:

appId: com.electron.app
productName: electron-vite-debug
directories:
  buildResources: build
files:
  - '!**/.vscode/*'
  - '!src/*'
  - '!electron.vite.config.{js,ts,mjs,cjs}'
  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
asarUnpack:
  - resources/**
win:
  executableName: electron-vite-debug
nsis:
  artifactName: ${name}-${version}-setup.${ext}
  shortcutName: ${productName}
  uninstallDisplayName: ${productName}
  createDesktopShortcut: always
mac:
  entitlementsInherit: build/entitlements.mac.plist
  extendInfo:
    - NSCameraUsageDescription: Application requests access to the device's camera.
    - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
    - NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
    - NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
  notarize: false
dmg:
  artifactName: ${name}-${version}.${ext}
linux:
  target:
    - AppImage
    - snap
    - deb
  maintainer: electronjs.org
  category: Utility
appImage:
  artifactName: ${name}-${version}.${ext}
npmRebuild: false
publish:
  provider: generic
  url: https://example.com/auto-updates

I'd be happy to provide further information if needed.

Thanks in advance!

[mmaietta]

first of all thanks for developing this easy-to-use project!

Considering how complex I consider the Configuration object, this is absolutely lovely to hear! Thank you 🙂

Quick Qs:

• Can you test with 26.0.11?

https://codesandbox.io/p/devbox/xq7hs8
Installing the packages seems to not work in the sandbox due to electron-builder failing, but forking it to the local environment should work.

So I'm not familiar with codesandbox tbh, I don't think I've used it before. How do I fork it to a local env?

[falkfrentzen]

Thank you for your quick response! Much appreciated!

• I came across the issue with version 24.13.3 and then tried to debug it with 25.1.8 yesterday before writing the initial message in this thread. Following your response I tested it with versions 26.0.11 and 26.0.12 in a npm workspace monorepo. Sadly with the same results as with the previous versions.

• I usually don't use codesandbox either so I misinterpreted the Fork button, which seems to fork the project to a new codesandbox instance, so I prepared this public minimal npm workspace monorepo https://github.com/falkfrentzen/electron-builder-monorepo-debug . It uses 26.0.11

Here are the steps for reproducing the bug:

1. run npm install
2. run cd ./apps/electron-vite-debug
3. run npm run build:target according to the current target system
4. inspect the /apps/electron-vite-debug/out directory for the file names and optionally their content, e.g out/renderer/assets/index-.js; inspect the content in dist//Resources/app.asar/out/renderer/assets; they should match
5. modify src/renderer/src/App.tsx by for example adding Test to the template
6. run npm run build:target again
7. Compare /apps/electron-vite-debug/out and dist//Resources/app.asar/out - in my case they don't match

[mmaietta]

So I ran into this issue when inspecting through vscode's IDE which leads me to think it's an IDE caching issue, as I was unable to reproduce it with a simple test.sh script:

#!/bin/bash -ex
rm -rf ./test-asar
DEBUG=electron-builder npm run build:mac
npx asar e dist/mac-arm64/electron-vite-debug.app/Contents/Resources/app.asar ./test-asar

Can you please try the script above locally? Basically, it'll auto-extract the asar contents to ./test-asar folder for you to compare against the out dir

[falkfrentzen]

I initially thought it was a VSCode caching problem as well, which is why after having tried it using the Atom editor as well, I dismissed that idea.

The tested it using the script you provided and indeed the out content matches the content in test-asar. However, for some reason the dist/mac-arm64/electron-vite-debug.app/Contents/Resources/app.asar content does not match the content of test-asar - neither in VSCode nor in Atom. Maybe VSCode and Atom use similar or same caching functionality.