Broken icon and dmg layout with non-ASCII characters in productName on macOS

[sr258]

• Electron-Builder Version: 22.11.7
• Node Version: 16.5.0
• Electron Version: 15.0.0
• Electron Type (current, beta, nightly): current
• Target: macOS dmg

When building an app that has non-ASCII characters like 'ü' in its product name, there are several issues:

the icon of the .app file is incorrect / empty
should be:

Is:

Furthermore when opening the dmg file the layout of the contents is broken:

Should be:

Is:

I've created a minimal sample that reproduces the error here: https://github.com/sr258/electron-builder-umlaut-sample

Steps to reproduce:

• clone the repo
• yarn install
• CSC_IDENTITY_AUTO_DISCOVERY=false yarn dist

I would be willing to contribute to a fix, but I'm new to electron-builder and unsure where to look. How are macOS icons set for .app files and where is the dmg layout created?

[sr258]

I've identified two causes for this:

1. macOS doesn't like the non-ASCII character in the app's icon name.
2. the dmg-builder Python tool is broken with non-ASCII characters and doesn't set the correct icon Y position

I've found a fix for issue 1. Execute this script:

# Needed to create fully funtioning DMG and zip files for macOS.
# You may need to allow the execution of the downloaded 7zip program in the security settings of system control.

sed -i '' 's/const iconFileName = `\${appFilename}\.icns`/const iconFileName = `icon.icns`/g' node_modules/app-builder-lib/out/macPackager.js

# Fixes another issue with .zip files not being created because of an old 7zip version:
wget -qO- https://www.7-zip.org/a/7z2103-mac.tar.xz | tar zxvf - 7zz
cp ./7zz node_modules/7zip-bin/mac/arm64/7za
mv ./7zz node_modules/7zip-bin/mac/x64/7za

Issue 2 is more difficult to fix as the incorrect position seems to be caused by something in macOS. I've tried the same thing with Canvas DMG and dmgbuild and the alignment is always incorrect. The only way around this is a workaround that moves both icons to the top so that they don't look misaligned: background.tiff.zip Sadly, it's not enough to simply replace the background and change the icon positions via the electron-builder config. The resulting DMG then contains an invalid .app file. You can copy it to /Applications, but when you run the app, it crashes. The only way around this was to completely replace the (outdated?) version of dmgbuild and to to also replace a lot of code in dmg.ts to fully use dmgbuild's capabilities (the current code seems to only use it to customize the dmg, but it's actually capable of creating a whole dmg by itself).

If anybody's interested in the code: https://github.com/sr258/electron-builder/tree/fix/non-ascii-product-name

I'm not sure if the maintainers are interested in a PR with this. The first issue should be easy to do (I don't there's anything that speaks against having icon.icns as a generic icon name, is there?) The second change is quite big and I didn't include all the configuration options you currently have in electron-builder. If you'd be generally interested in this, I could add all the missing functionality and clean everything up. I wonder why the current code doesn't fully use dmgbuild but does lots of things on its own, though...

[sr258]

For future readers: The problem runs much deeper than you might think. I've tried fixing this on many levels and you get one problem after the other. The final problem was that code signing doesn't work if you use certain non-ASCII characters. This finally lead me to a great discussion of the issue here: #4932 Things seem to work better if you copy & paste the name from Finder as this inserts characters which are encoded differently and don't break when using APFS.